Webkit-box shadow cannot be removed from one menu item

Question

I have tried removing the existing css from one of the items

following is my code

    <div class="main-navigation-inner">
            <div class="menu">
<ul
    <li id="menu-item-1406" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1406"><a href="#">Item one</a></li>

    <li id="menu-item-1553" class="nav_number menu-item menu-item-type-custom menu-item-object-custom menu-item-1553"><a title="Phone us today">121212</a></li>
    </ul></div> 

And the Css behind it looks like this

.main-navigation .menu > ul > li > a:hover, .main-navigation .menu > ul > li.active-menu-item > a {
    -webkit-box-shadow: 0 2px;
    box-shadow: 0 2px;
}

And the css i have added to remove the effect from the last menu item looks like this

TRY 1

  #site-navigation .main-navigation-inner .menu #menu-item-1553{
    -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;

    }

TRY 2 - i have tried this to check if there will be any effect on the properties and values but nothing has changed

    .main-navigation .menu > ul > li > a:hover,
            .main-navigation .menu > ul > li.active-menu-item > a {
                -webkit-box-shadow: 0 0 !important;
                        box-shadow: 0 0 !important;
                        -moz-box-shadow:0 0 !important;
            }

Answer 1

You CSS specificity is too high which I don't see why it is necessary. Try to simplify your code, if it is possible.

To answer your question, you had originally applied box shadow to anchor and then trying to remove box shadow from LI instead of anchor. Following code should work:

#menu-item-1553 a:hover {
-webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;

}

Above code should work.