Css 水平嵌套菜单无法正常工作

Question

我的这个网站有一个 wordpress 生成的菜单，它制作一个水平菜单，其中的子菜单有子类别。

这是一个 fiddle http://jsfiddle.net/79RKd/3/

将鼠标悬停到属性> 属性搜索，然后到精选列表。属性搜索的子菜单不会消失很烦人的东西。

同时将鼠标悬停在属性搜索的子选项上，然后返回特色列表将停用特色列表的链接，子菜单不会消失。

这是 HTML:

<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33"><a href="#">Home</a></li>
<li id="menu-item-612" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-612"><a>Properties</a>
<ul class="sub-menu">
    <li id="menu-item-660" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-660"><a>Property Search</a>
    <ul class="sub-menu">
        <li id="menu-item-663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-663"><a href="#">Basic Search</a></li>
        <li id="menu-item-664" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-664"><a href="#">Advanced Search</a></li>
    </ul>
</li>
    <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-209"><a href="#">Featured Listings</a></li>
    <li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a href="#">Mortgage Calculator</a></li>
</ul>
</li>


</ul></div></nav>

CSS

.main-navigation ul#menu-main-menu li.menu-item:hover ul.sub-menu{display:block;}
ul.sub-menu{width:185px;position:absolute;left:0;z-index:6;margin:0;padding:0;}
ul.sub-menu li{background-color:#00314f;}
ul.sub-menu > li:hover > ul > li{background-color:#00314f;display:block;width:185px;position:relative;top:-62px;left:185px;z-index:6;border-left:1px solid #ccc;margin:0;padding:0;}
ul.sub-menu > li{float:none;border-bottom:1px solid #e2e2e2;position:relative;}
.main-navigation ul.sub-menu,.main-navigation div.nav-menu > ul,ul.sub-menu li > ul li,.sub-menu ul li ul{display:none;}
.menu{height:60px;margin:0 auto;}
.menu ul{list-style:none;margin:0;padding:0;}
.menu li{display:block;position:relative;float:left;height:60px;padding:0 0 0 2px;}
.menu a{display:block;height:36px;background:none;letter-spacing:-1px;font:18px/19px Helvetica, "Times New Roman", Times, serif;padding:20px 20px 0;}
.menu a:hover{border-bottom:1px solid #c5c5c5;text-decoration:none;}
.menu .active a{border-bottom:4px solid #E1E9E2;text-decoration:none;}

Answer 1

DEMO

添加两行CSS来固定位置

.main-navigation ul#menu-main-menu li.menu-item:hover ul.sub-menu ul.sub-menu{left: 185px; top: 0;}
.main-navigation ul#menu-main-menu li.menu-item:hover ul.sub-menu ul.sub-menu li{top:0; left:0;}

希望对您有所帮助!