html - CSS/HTML 子级导航问题

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

( fiddle :http://jsfiddle.net/NjpNN/)

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

除非将鼠标移出子菜单区域，否则如何使子菜单保留在屏幕上？请记住，我无法更改 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