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-item:hover ul {
    display:block;
}
.menu li ul {
    display:none;
}
.sub-menu {
    position: absolute;
    top:50px;
    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:after {
    display: block;
}
.sub-menu a {
    float: none;
}
.menu {
    width:100%;
    height:30px;
    background-color:#ebebed;
    float:left;
    display: block;
    list-style-type: none;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

（小提琴：http://jsfiddle.net/NjpNN/）

如您所见，我正在尝试创建导航菜单。当我将主菜单项“Home”悬停时显示子菜单，但当我尝试将鼠标悬停在子菜单区域上时它会消失。

除非我将鼠标移出子菜单区域，否则如何使子菜单保持在屏幕上？请记住，我无法更改HTML，因为它是由WordPress生成的。我需要编辑我的CSS来实现这一点。

示例：类似这样的内容 - http://jsfiddle.net/La2L8/（不是我的代码）。

Answer 1

确保您的菜单项（<a>标签）一直到菜单的底部，因此当移动鼠标时，它实际上不会留下悬停区域。

将此内容添加到.menu a css：

.menu a {
    font: normal 14px Helvetica, sans-serif;
    padding-left:5px;
    padding-top:5px;
    padding-right:5px;
    float:left;
    color:black;
    height:30px; // this here
}

请参阅此JSFiddle

Answer 2

我会避免使用建议在<a>元素中包装子菜单的答案。这会产生一个可访问性问题，即子<a>未覆盖的任何多余空间将链接到原始菜单项。子菜单中的任何边框，边距或非链接内容都将链接到父页面。这根本不是用户期望的，如果他们进行流浪点击会让人感到困惑。

我将用您当前的解决方案解释这个问题：

.menu-item:hover ul {
    display:block;
}

您将鼠标悬停在<li class="menu-item">元素上，该元素包含链接<a>和子菜单<ul class="sub-menu">并排（默认为WordPress wp_list_pages()）。

这是正确的，然而，因为父级中的<a>和<ul>元素使用浮点和绝对定位来定位，菜单项的高度不知道。这就是为什么将鼠标移动到<a>元素下面会关闭菜单，除了<ul>的背景之外什么都没有。这就是系统的工作方式，这是您在理解所提供的参考资料之前需要学习的内容。

您可以使用以下任何选项解决此问题：

直接为<li>
使用CSS清除浮动：clear: left - 这将计算浮动到左侧的兄弟元素的高度。
停止使用花车，而是使用：display: inline-block
垂直向上移动子菜单，使其接触<a>元素。由于浏览器之间的字体差异，除非<a>元素也具有固定高度，否则这可能不可靠。

Here is a solution。浮点数用于顶级菜单项，只是为了删除内联元素之间的自然间距。但是，大多数布局都依赖于display: inline-block。使用子选择器>，我们可以确定顶级元素与子菜单中的子元素之间的差异。有一些颜色和填充，显示您想要编辑的内容。

ul.menu > li.menu-item {
    position: relative;
    float: left;
}
ul.menu > li.menu-item > a {
    display: inline-block;
    padding: 3px 5px;
    background: #dfdfdf;
}
.clear { clear: both; }

此解决方案的关键是添加<li class="clear"></li>。如果您无法直接修改HTML，可以尝试使用伪元素：

ul.menu > li.menu-item:last-child:after { content: ' '; clear: both; }

CSS / HTML子级别导航问题

2 个答案: