Question

我正在尝试设计导航菜单。我有这个HTML代码：

<div class="primaryNavigationContainer"><ul id="menu-menu-1" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-5"><a href="http://merrycode.com/cheekoo/wp/">Home</a>
<ul class="sub-menu">
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://www.xyz.com">MerryCode</a></li>
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://www.google.com">Google</a></li>
</ul>
</li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://merrycode.com/cheekoo/wp/?page_id=2">Sample Page</a></li>
</ul></div>

这就是CSS：

.menu a
{
    font: normal 14px Helvetica, sans-serif;
    padding-left:5px;
    padding-top:5px;
    padding-right:5px;
    float:left;
    color:black;

}
.menu-item a{

text-decoration:none;

}

.menu li a:hover > ul {

    display:block !important;
}

.sub-menu
{
display: none;
position: absolute;
top:120px;
width: 170px;
height:auto;
background: #edebeb;
z-index: 100000;
z-index: 99999;
-moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06);
list-style-type: none;

}
.sub-menu a
{
float: none;
}

当有人在菜单项上悬停时，我试图让子菜单可见。以下CSS似乎不起作用：

 .menu li a:hover > ul {

        display:block !important;
    }

我做错了什么？

Answer 1

改为使用adjacent sibling combinator：

.menu li a:hover + ul {
    display: block !important; /* The UL is a sibling of a, not child */
}

Answer 2

您可能希望使用:hover上的<li>代替<a>代码，试试这个：

.menu li:hover > ul {
  display:block !important;
}

当您将鼠标悬停在子菜单上时，这种情况仍然存在。

使用子组合器在悬停时使子元素可见

2 个答案: