我希望通过我的下拉直接下拉子菜单.. 我不知道如何解决这个问题。请帮忙。请告诉我是否有任何遗漏或错误的代码 这是我的HTML代码:
<div id='TB001'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>contact</a></li>
<li><a href='#'>drop down</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li><a href='#'>search</a></li>
</ul>
</div>
这是CSS:
#TB001>ul{
list-style:none;
padding:0;
margin:0;
background:rgba(0, 102, 102, 1);
width:100%;
float:left;
border-radius:10px;
line-height:15px;
}
#TB001>ul>li>a{
padding:10px;
margin:5px;
font-size:16;
color:white;
float:left;
text-decoration:none;
border-radius:5px;
border:1px solid black;
}
#TB001>ul>li:first-child{
margin-left:20px;
}
#TB001>ul>li.active>a{
-moz-box-shadow: inset 0 5px 10px #000000;
-webkit-box-shadow: inset 0 5px 10px #000000;
box-shadow: inset 0 5px 10px #000000;
background:rgba(0, 0, 0, 0.5);
}
#TB001>ul>li>a:hover{
background:rgba(0, 0, 0, 0.5);
}
#TB001>ul>li>ul{
position:absolute;
display:none;
}
#TB001>ul>li:hover>ul{
display: block;
list-style:none;
background:rgba(0, 102, 102, 1);
}
#TB001>ul>li:hover>ul>li>a{
padding:10px;
margin:5px;
font-size:16;
color:white;
float:left;
text-decoration:none;
border-radius:5px;
border:1px solid black;
}
感谢
答案 0 :(得分:0)
您需要相对定位li
元素,以便绝对定位的子菜单会从父li
计算其左/上位置:
#TB001>ul>li {
position: relative;
float: left;
}
#TB001>ul>li>ul {
position:absolute;
display:none;
left: 0;
top: 100%;
}
答案 1 :(得分:0)
使用此
更新您的CSS#TB001>ul>li>ul{
position:absolute;
display:none;
margin-left: 0;
margin-top :45%
}
#TB001>ul>li {
position: relative;
float: left;
}