Css垂直菜单弹出

my.css驱动菜单垂直下拉部分的子菜单有问题。在JSFIDLE示例中，“产品”下的高照明“卧室家具”显示“双层床”。当显示“双层床”时，家庭办公室下方的菜单选项实际上是不可选择的，如果将鼠标移动到家庭办公室的最右侧，则可以选择该选项。我已经用尽了我所有的想法，任何帮助都将不胜感激

我认为问题出在CSS片段的“第二级垂直下拉”部分……请参见示例

请参阅js小提琴：

试试这个：

   <div id="header">
       <div id="nav">
           <ul>
               <li>
                   <a href="#">Menu1</a>
                   <ul>
                       <li><a href="#"></a>submenu
                           <ul>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                           </ul>
                       </li>
                       <li>submenu</li>
                       <li>submenu</li>
                       <li>submenu</li>
                       <li>submenu</li>

                   </ul>
               </li>
               <li>
                   <a href="#">Menu2</a>
               </li>
               <li>
                    <a href="#">Menu3</a>
                   <ul>

                       <li>submenu</li>

                       <li>submenu</li>
                       <li><a href="#"></a>submenu
                           <ul>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                           </ul>
                       </li>

                   </ul>
               </li>
               <li>
                   <a href="#">Menu4</a>
               </li>
               <li>
                   <a href="#">Menu5</a>
               </li>
           </ul>
       </div>

   </div>


    ul, li {
    margin:0; padding:0; list-style:none; text-decoration:none; color:#fff}
    a { text-decoration:none;
    color:#fff}
    #nav ul {
    width:100%;}
    #nav ul li {
    float:left; padding:0 15px; line-height:40px;}

body {
    overflow: hidden;
}


#header {
    background: none repeat scroll 0 0 #808080;
    box-shadow: 1px 2px 3px #000;
    float: left;
    height: 50px;
    width: 87%;
}
#nav ul li {
    float: left;
    line-height: 51px;
    padding: 0 15px;
}
    #nav ul > li:hover {
        background-color: #000;
    }

#nav ul li > ul {
    background-color: #000;
    display: none;

    position: absolute;
    top: 59px;
    width: 150px;
}

    #nav ul li:hover > ul {
    display:block} 
#nav ul li > ul > li {
    background: none repeat scroll 0 0 #999;
    border-bottom: 1px solid;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}

#nav ul li > ul > li > ul {
    background: none repeat scroll 0 0 pink;
    display: none;
    left: 150px;
    position: absolute;
    text-align: center;
    top: 0;
}
    #nav ul li > ul > li:hover ul {
    display:block}

#nav ul li > ul > li > ul > li {
    background: none repeat scroll 0 0 pink;
    color: #000;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

---

JSFIDLE不适用于我Chrome 40.0.2214.94无论出于何种原因，您必须将run框一直向左滚动才能看到JFIDLE中的菜单。谢谢您的提示。虽然您的解决方案提供了一个全新的css驱动的菜单系统，但如果有人能够查看我在JSFIDLE上发布的代码并给出修改建议，我们将不胜感激。如果我从零开始使用上述解决方案，那么还有很多css需要修改。请注意：在查看JSFIDLE时，垂直分隔符必须向左拖动才能正确显示我的示例…不知道为什么。非常感谢！分解元素并找出如何将您的解决方案集成到我的代码中。非常感谢！

   <div id="header">
       <div id="nav">
           <ul>
               <li>
                   <a href="#">Menu1</a>
                   <ul>
                       <li><a href="#"></a>submenu
                           <ul>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                           </ul>
                       </li>
                       <li>submenu</li>
                       <li>submenu</li>
                       <li>submenu</li>
                       <li>submenu</li>

                   </ul>
               </li>
               <li>
                   <a href="#">Menu2</a>
               </li>
               <li>
                    <a href="#">Menu3</a>
                   <ul>

                       <li>submenu</li>

                       <li>submenu</li>
                       <li><a href="#"></a>submenu
                           <ul>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                               <li><a href="#">sub sub menu</a></li>
                           </ul>
                       </li>

                   </ul>
               </li>
               <li>
                   <a href="#">Menu4</a>
               </li>
               <li>
                   <a href="#">Menu5</a>
               </li>
           </ul>
       </div>

   </div>


    ul, li {
    margin:0; padding:0; list-style:none; text-decoration:none; color:#fff}
    a { text-decoration:none;
    color:#fff}
    #nav ul {
    width:100%;}
    #nav ul li {
    float:left; padding:0 15px; line-height:40px;}

body {
    overflow: hidden;
}


#header {
    background: none repeat scroll 0 0 #808080;
    box-shadow: 1px 2px 3px #000;
    float: left;
    height: 50px;
    width: 87%;
}
#nav ul li {
    float: left;
    line-height: 51px;
    padding: 0 15px;
}
    #nav ul > li:hover {
        background-color: #000;
    }

#nav ul li > ul {
    background-color: #000;
    display: none;

    position: absolute;
    top: 59px;
    width: 150px;
}

    #nav ul li:hover > ul {
    display:block} 
#nav ul li > ul > li {
    background: none repeat scroll 0 0 #999;
    border-bottom: 1px solid;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}

#nav ul li > ul > li > ul {
    background: none repeat scroll 0 0 pink;
    display: none;
    left: 150px;
    position: absolute;
    text-align: center;
    top: 0;
}
    #nav ul li > ul > li:hover ul {
    display:block}

#nav ul li > ul > li > ul > li {
    background: none repeat scroll 0 0 pink;
    color: #000;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}