Question

我的.css驱动菜单的垂直下拉部分的子菜单存在问题。在jsfiddle的例子中，'Products'下的高照明'卧室家具'显示'双层床'。正在显示“双层床”时，下面的菜单选项（家庭办公室）不可选（实际上，如果将鼠标移动到家庭办公室的最右侧，则可以选择它）。我已经用尽了所有的想法，我们将不胜感激。

我认为问题出在CSS的“二级垂直下拉”部分（CSS代码段...请参阅jsfiddle示例）

    .rmenu li ul li:hover ul li a {
    /*padding: 0px 0px 0px 33px;*/
    padding: 0px 0px 0px 5px;
    background: #e8dec7;
    /*background color for submenu            hovered text*/
    color: #51db29;
    /* this is the color of the sub-sub   menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
    word-wrap: break-word;
    min-width:100px;
    position: relative;
    left: 175px;
    top: -35px;
    /* display 3rd level to the right*/
}
/* -- Appearance of second vertical dropdown menu hovered (submenu of first level vertical menu) -- */
 .rmenu li ul li:hover ul li:hover a {
    color: #000000;
    /*hovered text color*/
    min-width:100px;
}
/* ----

Answer 1

请参阅js小提琴：http://jsfiddle.net/mf3y6Lj6/1/

试试这个：

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

Css垂直菜单飞出

1 个答案: