第三级下拉CSS不会出现问题

Question

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

我想获得一个第三级下拉工作，我不知道为什么它不是。

根据FABRIC 1> FABRICS 2>我希望织物衬垫在上悬停时可以降低另一个等级。

我最近添加了第11-21行的所有内容（在jsfiddle中）以再试一次，我所做的所有事情都隐藏了第三级，但是在Fabric Backings时却无法显示它被盘旋。

任何人都可以给我的帮助是非常感谢。我已经为最后一次拯救了这个小小的困境，现在我的大脑被炸了，似乎无法得到正确的解决方案。

:)

在此先感谢您。

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

Answer 1

更换

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

与

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

即：

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

b。将ul添加到表达式的末尾，因为这是应该生效的元素

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