我在这里有一个jsfiddle:http://jsfiddle.net/keltoid/BddYe/2/
我正在尝试获得第三级下拉工作,但我不知道为什么不是。
在FABRIC 1下>织物2> 我希望Fabric Backings在悬停在之后再次降低。
我最近添加了第11行-21(在jsfiddle中)的所有内容,再试一次,以便实现它,我所做的就是隐藏第3级,但是当Fabric不能显示它时背衬徘徊。
任何人都可以给予我的帮助非常感谢。我终于挽救了这个小难题,现在我的大脑已经被炒了,似乎无法找到合适的绝对可靠的东西。
:)
提前谢谢。
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;
}
答案 0 :(得分:0)
替换
#menu li ul li ul li :hover {
display: block;
}
与
#menu li ul li ul li:hover ul {
display: block;
}
即:
一个。删除li
和:hover
之间的空格。
湾将ul
添加到表达式的末尾,因为这是应该实现的元素
正如@Paulie_D评论的那样,您应该考虑使用子菜单类来避免所有这些混乱的嵌套。
如果您选择这样做,请务必使用直接子选择器(>
)仅定位链中的直接子菜单。