Css 无法从一个菜单项中删除Webkit框阴影

我已尝试从其中一个项目中删除现有css

下面是我的代码

    <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> 

我添加的css是为了消除最后一个菜单项的效果，它如下所示

.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;
}

试试1

---

你的要求太高了，我不明白为什么有必要这么做。如果可能的话，尽量简化代码

为了回答您的问题，您最初将长方体阴影应用于锚定，然后尝试从LI而不是锚定中移除长方体阴影。以下代码应该可以工作：

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

}

上面的代码应该可以工作

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

}