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

我有这个网站，有一个wordpress生成的菜单，使水平菜单与子菜单，有子类别

这是一把小提琴

将鼠标悬停到“属性>属性搜索”，然后再悬停到特色列表。财产搜索的子菜单不会使非常烦人的事情消失

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

以下是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 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;}

---

希望这有帮助

对jsFiddle来说没问题。。。。但也许你可以拯救我们的眼睛，在发布代码之前美化代码-(

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