第三级CSS多层菜单问题
问题描述:
我在HTML和CSS中制作了三级菜单。
该菜单一直工作到第三级(products
下)。第三个ul
子菜单显示不正确。它被不正确地对齐。我希望它摆脱它的父母菜单并定位在正确的位置。我的代码是jsfiddle。第三级CSS多层菜单问题
我改变了一些postions
的ul
,li
但他们似乎并没有为我工作。
CSS,HTML的小提琴:
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#menucon {
\t width:100%;
\t background-color:#222;
}
#nav {
clear: both;
font-size: 12px;
height: 42px; \t
}
#nav ul {
background-color: #222;
\t background-color: rgba(34,34,34,0.70);
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
#nav ul.sec { z-index: 2; }
#nav ul.third { z-index: 3; border:2px solid red; }
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 14px 30px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav ul.subs li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 13px 25px 0;
position: relative;
\t width:178px;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs.sec {
left: 0;
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
\t position:absolute;
}
#nav li:hover ul.subs.third {
left: 60px; /* test */
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
\t position:absolute;
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li.sec {position:relative;}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 32px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 400ms ease-out ;
-ms-transition: all 400ms ease-out ;
-o-transition: all 400ms ease-out ;
-webkit-transition: all 400ms ease-out ;
transition: all 400ms ease-out ;
}
#lavalamp:hover {
-moz-transition-duration: 4500s;
-ms-transition-duration: 4500s;
-o-transition-duration: 4500s;
-webkit-transition-duration: 4500s;
transition-duration: 4500s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp, #lavalamp.act1 {
left: 35px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp, #lavalamp.act2 {
left: 180px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp, #lavalamp.act3{
left: 345px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp, #lavalamp.act4 {
left: 486px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp, #lavalamp.act5 {
left: 620px;
}
<div id="menucon">
<ul class="innercon" id="nav">
\t <li><a href="">HOME PAGE</a></li>
\t <li><a href="#">PRODUCTS</a>
\t \t <ul class="subs sec">
\t \t \t <li class="sec"><a href="#">LEVEL 1</a>
\t \t \t \t <ul class="subs third">
\t \t \t \t \t <li><a href="#">LEVEL 2</a></li>
\t \t \t \t \t <li><a href="#">LEVEL 2</a></li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="#">LEVEL 1</a></li>
\t \t \t <li><a href="#">LEVEL 1</a></li>
\t \t \t <li><a href="#">LEVEL 1</a></li>
\t \t \t <li><a href="#">LEVEL 1</a></li>
\t \t \t <li><a href="#">LEVEL 1</a></li>
\t \t </ul>
\t </li>
\t <li><a href="#">CONTACT US</a></li>
\t <div id="lavalamp"></div>
</ul>
</div>
答
这里是一个DEMO尝试,如果它适合你的问题。
你会不得不增加这只是这个CSS:
.third{
display: none;
}
li > ul.sec > li:hover > ul.third {
display: inline-block;
position: absolute;
left: 100%!important;
top: 0!important;
z-index: 9;
width: 150px;
}
说明:
当您将第二个层次的项目(li
),你会显示您的子菜单100%
左边,也就是旁边徘徊li
和top: 0
将把它放在内联li
。
您可以根据自己的需要调整width
和z-index
。
答
这是你想要的吗?
你的问题仍然有点不清楚你想要什么。
ul.sec {
overflow: visible !important;
}
.subs .third {
left: 228px !important;
top: 41px !important;
}
哇...太好了。它完美的作品..谢谢 –