下拉菜单项继承父菜单项边框 CSS 问题

Question

我已经创建了一个下拉菜单，但是我有一些子菜单项继承父菜单项的 CSS 的问题。

特别是，子菜单项继承父项的蓝色边框，悬停在子菜单项上时为浅蓝色背景。

我添加了一个红色边框，可以看到，但蓝色仍然出现，另外，我添加了一个“红色”悬停类，但没有被触发。

这是我的小提琴：http://jsfiddle.net/oampz/W2zrn/

HTML：

<nav class="site-nav">
    <ul class="menu-nav wrap menu menu--hor">
        <ul id="main-nav">
            <li class="menu-nav--home">
                <a href="index.html" title="home"></a>
            </li>
            <li id="nav-dropdown" class="drop-down"> <a>Link 1</a>

                <ul class="visuallyhidden">
                    <li>
                        <a href="#" title="title">Link Two Sub One</a>
                    </li>
                    <li>
                        <a href="#" title="title">Link Two Sub Two</a>
                    </li>
                    <li>
                        <a href="#" title="title">Link Two Sub Three</a>
                    </li>
                </ul>
            </li>
            <li><a>Link 2</a>

            </li>
        </ul>
    </ul>
</nav>

Answer 1

要删除继承父级蓝色边框的子菜单项，请更改此项

.menu-nav li li a, .menu-nav a {
  border-right: 1px solid #0d63ba;
}

到

.menu-nav > li a {
  border-right: 1px solid #0d63ba;
}

这样做只是将蓝色边框应用于ul menu-nav 的直接子元素（li 项）的锚标记。

为了让红色背景悬停发生改变

.drop-down ul li:hover {
  background-color: red;
}

到

.drop-down ul li:hover a {
  background-color: red;
}

Answer 2

看看这个我更新了你的小提琴 http://jsfiddle.net/W2zrn/5/

添加小代码

#nav-dropdown li a {
  border: medium none;
padding: 0 0 0 10%;
width:100%;
}
#nav-dropdown li {
  width: 100%;
  border: none;
}