Question

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

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

我添加了一个红色边框，可以看到，但是仍然会出现蓝色，我还添加了一个红色的＆＃39;悬停类，但这不会被触发。

这是我的小提琴：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;
}

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

2 个答案: