0

我在这里有一个 jsfiddle：http: //jsfiddle.net/keltoid/BddYe/2/

我正在尝试使第三级下拉菜单起作用，但我不知道为什么不这样做。

在 FABRIC 1 > FABRICS 2 >我希望 Fabric Backings 在悬停在.

我最近添加了第 11 -21 行（在 jsfiddle 中）的所有内容，以便再尝试一次以实现它，而我成功做的只是隐藏了第 3 层，但是当将 Fabric Backings 悬停在上面时无法显示它。

任何人都可以给我的任何帮助都非常感谢。我已经把这个小困境留到了最后，现在我的大脑被炸了，似乎无法得到正确的 ul li ul blah blah blah 东西的共同行为。

:)

先感谢您。

HTML：

   <ul id="menu">
     <li><a href="../../fabrics.aspx">FABRIC 1</a>
        <div class="menu-container-1">
          <ul class="column-1">
           <li><a href=""><span>Fabrics 2</span></a>
            <ul class="menu-container-5">
             <li><a href="~/products/U3/U13/U5.L24/Fabric-by-the-yard.htm">Fabric by Yard</a></li>                    
             <li><a href="~/backing.aspx"><span>Fabric Backings</span></a>
               <ul>
                 <li><a href="bss.com">BACKING ONE</a></li>
                 <li><a href="bss.com">BACKING TWO</a></li>
               </ul>                     
             </li>                     
             <li><a href="~/products/U3/U5/U5.L25/Minkee.htm">Minkee</a></li>
            </ul>
           </li> 
            <li><a href="~/products/U3/U6/U6.L2/ALL%20Fabric%20Collections.htm"><span>Fabric Collections</span></a>
             <ul>
              <li><a href="~/products/U3/U6/U6.L2/ALL%20Fabric%20Collections.htm">All Fabric Collections</a></li>
              <li><a href="">Color Collections</a></li>
             </ul>
              <li><a href=""><span>Soft Fabrics</span></a>
               <ul>
                <li><a href="">All Exclusives</a></li>
                <li><a href="">Cotton</a></li>
               </ul>
              </li>
             </ul>
            </div>      
           </li>
        </ul>

CSS：

 #top_base_nav {
    padding: 0;
    height: 30px;
    left: 0px;
    width: 1040px;  /* take this out for full width*/
    margin: -10px auto 20px auto;   /* also */
    background-color:#F9FCFE;

}

#menu li ul li ul li ul{
    border-top: 3px solid #FFFFFF;
    display: none;
    padding: 3px 10px;

}

#menu li ul li ul li: hover {
    display: block;

}

#menu {
    list-style:none;
    float:left;
    width:1050px;
    margin:auto;
    height:30px;
    padding:0px 30px 0 0px;
    background:#ffffff;
    border:none;
    /* border around entire menu - v v all of these */
    /*box-shadow:inset 0px 0px 1px #e8edf0;
    -moz-box-shadow:inset 0px 0px 1px #e8edf0;
    -webkit-box-shadow:inset 0px 0px 1px #e8edf0; */
}
#menu ul, #menu li {
    line-height:22px;
    text-align:left;
}

/* tab starts here */
#menu li {
    float:left;
    display:block;
    position:relative;
    text-align:center;
    padding:4px 30px;   /* good, leave  DON'T TOUCH! was 4px 8px  */
    margin:0;
    border:none; 
    /*border-right: 1px solid #E8F3FE;  */

    /* gradient */
    background:#F1F8FE;
    background: -moz-linear-gradient(center top, #ffffff, #E2F2F7) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#E2F2F7));
    box-shadow:inset .4px -2px 3px 2px #E0F1F7;
}

#menu li:hover {
    border-width:0;    /* borders between top nav links */
    padding:4px 30px;   /* good, leave  DON'T TOUCH!  PERFECT 7/9   was 4px 8px*/
    display:block;
    border-right-color:#B9C3CC;  /*not working but prob don't need */
}

/*   added 7/9 leave in, gives dropdowns the gradient..  */
 #menu li li {
    background:#ffffff;
    background: -moz-linear-gradient(center top, #ffffff, #FAFCFE) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FAFCFE));
    box-shadow:inset .4px -2px 3px 2px #EFFFFF;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px/1.8em;
    color: #000;
    display:block;
    outline:0;
    text-decoration:none;
    font-weight:500;
}
#menu li:hover a {color:#161616;}

/* menu containers here  */
 #menu .menu-container-1, #menu .menu-container-2, #menu .menu-container-3, #menu .menu-container-4, #menu .menu-container-5{
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em;
    text-align:left;
    padding:5px 5px 3px 5px;
    border:1px solid #D8E9F8;    /* border around dropdown */
    z-index:1;  /*keep */
    /* rounded corners */
    border-radius:0 5px 5px 5px;
    -moz-border-radius:0 5px 5px 5px;
    -webkit-border-radius:0 5px 5px 5px;
    /* gradient */
    background:#ffffff;
    background: -moz-linear-gradient(center top, #ffffff, #FAFCFE) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FAFCFE));
    box-shadow:inset .4px -2px 3px 2px #EFFFFF;
}
#menu .menu-container-1 {
    width:175px;
}
#menu .menu-container-2 {
    width:346px;
}
#menu .menu-container-3 {
    width:330px;
}
/* for medley drops  */
#menu .menu-container-4 {
    width:350px;
}
#menu .menu-container-5 {
    width:175px;
}
#menu .menu-container-2 li .column-1, .menu-container-2 li .column-2 {width:175px}

/* need - hover over main item and  1st sub drops down  */
 #menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3{
    top:auto;
    left:0px;  /* moves container to left */
}
#menu li:hover .menu-container-4, #menu li:hover .menu-container-5 {top:0px; left:80% }

/*added 7/9 for span arrow sub menu */
 #menu span {
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
#menu ul span {
    background-image:url("https://www.kqimageserver.com/other/arrowsub.png");
   /* padding-right:19px;   */
}
/*is sub menu */
 #menu ul ul {
    position:absolute;
    left:82%;
    top:4px;
}
#menu .column-1 {
    display:inline;
    float:left;
    position:relative;
    margin:0;
}
#menu .column-2 {
    position:ABSOLUTe;
    margin:0;
    left:177px;
    top:0px;
     line-height: 24px;
     padding-top:5px;
    /*float:right;  */
}
#menu li:hover div a {
    box-shadow: 0 1px 0 #eeeeee, 0 2px 0 #eeeeee;    /*lines between list items */
    color: #000;
    font-size: 13px;
    padding-left: 2px;
    font-weight:500;
    width: 175px;   
}

/*leave - sub sub background   */
 #menu li:hover, #menu li a:hover {    /* menu li a: WAS div a: hover but made all link hovers blue bg */
    background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
    color: #000;
    background:#deeff7; 
}
#menu li ul {
    /*box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  */
    list-style:none;
    padding:0;
    margin-bottom:7px;
}
#menu li ul li {
    float: none;
    font-size: 12px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left;
    width: 175px;
}
#menu li ul li:hover {
    background: none;
    border: medium none; /*changed to a color 10-17 didn't do anything */
    margin: 0;
    padding: 0;
}
/* THIS IS WORKING!     *//*      third-and-above-level lists   */
 #menu li ul ul {    
    margin: 0 0 0 25px;
    z-index:1;  /*keep! */
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, {
    /* lists nested under hovered list items */
    left: auto;
}

ul.column-1 li ul, ul.column-1 li li, ul.column-2 li ul, ul.column-2 li li {
    display:none;
}
ul.column-1 li:hover ul, ul.column-2 li:hover, ul.column-2 li li hover {
    display:block;
}
4

1 回答 1

1

代替

#menu li ul li ul li :hover  { 
    display: block;
}

和

#menu li ul li ul li:hover ul { 
    display: block;  
}

IE：

一个。删除 和 之间li的空格:hover。

湾。添加ul到表达式的末尾，因为这是应该影响的元素

正如@Paulie_D 评论的那样，您应该考虑使用子菜单类来避免所有这些泥泞的嵌套。如果您选择这样做，请务必使用直接子选择器 ( >) 仅定位链中的直接子菜单。

于 2013-10-18T20:27:47.960 回答