Question

我用HTML和CSS制作了一个三级菜单菜单一直工作到第三级（products下）。第三个ul子菜单无法正常显示。这是不正确的对齐。我希望它离开它的父菜单并位于右侧。

以下是我的代码jsfiddle。

我更改了postions ul li的{{1}}，但它们似乎对我不起作用。

CSS，小提琴中的HTML：

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#menucon {
	width:100%;
	background-color:#222;
}
#nav {
    clear: both;
    font-size: 12px;
    height: 42px;	
}
#nav ul {
    background-color: #222;
	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;
	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);
	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);
	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">
	<li><a href="">HOME PAGE</a></li>
	<li><a href="#">PRODUCTS</a>
		<ul class="subs sec">
			<li class="sec"><a href="#">LEVEL 1</a>
				<ul class="subs third">
					<li><a href="#">LEVEL 2</a></li>
					<li><a href="#">LEVEL 2</a></li>
				</ul>
			</li>
			<li><a href="#">LEVEL 1</a></li>
			<li><a href="#">LEVEL 1</a></li>
			<li><a href="#">LEVEL 1</a></li>
			<li><a href="#">LEVEL 1</a></li>
			<li><a href="#">LEVEL 1</a></li>
		</ul>
	</li>
	<li><a href="#">CONTACT US</a></li>
	<div id="lavalamp"></div>
  </ul>
</div>

Answer 1

如果符合您的问题，可以尝试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。

Answer 2

这就是你想要的吗？

你的问题仍然不清楚你想要什么。

ul.sec {
    overflow: visible !important;
}

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

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

第三级CSS多级菜单问题

2 个答案: