2015-10-06 161 views
1

我在HTML和CSS中製作了三級菜單。
該菜單一直工作到第三級(products下)。第三個ul子菜單顯示不正確。它被不正確地對齊。我希望它擺脫它的父母菜單並定位在正確的位置。我的代碼是jsfiddle第三級CSS多層菜單問題

我改變了一些postionsul,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>

回答

2

這裏是一個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%左邊,也就是旁邊徘徊litop: 0將把它放在內聯li

您可以根據自己的需要調整widthz-index

+0

哇...太好了。它完美的作品..謝謝 –

0

這是你想要的嗎?

你的問題仍然有點不清楚你想要什麼。

ul.sec { 
    overflow: visible !important; 
} 

.subs .third { 
    left: 228px !important; 
    top: 41px !important; 
} 

https://jsfiddle.net/gsw4jxy8/4/