gpt4 book ai didi

css - 下拉菜单列表问题

转载 作者:行者123 更新时间:2023-11-27 22:29:12 25 4
gpt4 key购买 nike

我正在尝试使下拉菜单列表显示为内联(水平)但最终垂直显示。如果我将 ul_dropdown 宽度设置为 600px 左右,它就会得到我想要的结果。但是,我希望它在不设置宽度的情况下完成。这是我简化的 html/css:

<style type="text/css">
#menu {
list-style:none;
}

#menu .item{
display:inline;
position:relative;
float:left;
width:100px;
height:20px;
text-align:center;
}

#menu .item .ul_dropdown{
position:absolute;
float:left;
left:-999em;
list-style:none;
margin:0px;
padding:0px;
border:2px solid red;

}

#menu .item .ul_dropdown li h3{
margin:0px;
padding:0px;
}

#menu .item .ul_dropdown li{
display:inline;
position:relative;
float:left;
list-style:none;
margin-right:1px;
}

#menu .item .ul_dropdown li ul{
display:inline!important;
position:relative;
float:left;
padding:0px;
margin:0px;
width:200px;
}

#menu .item .ul_dropdown li ul li{
border:1px solid blue;
width:200px;
height:22px;
}

#menu .item:hover{
background-color:red;
}

#menu .item:hover .ul_dropdown {
left:0px;
top:auto;
}

#menu .item:hover .ul_dropdown li
{
display:inline;
width:200px;
}

</style>
<ul id="menu">
<li class="item">Main
<ul class="ul_dropdown">
<li><h3>Sales</h3>
<ul>
<li>Sales Sample 1</li>
<li>Sales Sample 2</li>
<li>Sales Sample 3</li>
</ul>
</li>
<li><h3>Invoice</h3>
<ul>
<li>Invoice Sample 1</li>
<li>Invoice Sample 2</li>
</ul>
</li>
<li><h3>Deal</h3>
<ul>
<li>Deal Sample 1</li>
<li>Deal Sample 2</li>
<li>Deal Sample 3</li>
</ul>
</li>
</ul>

<li class="item">1st Menu
</li>

<li class="item">2nd Menu
</li>

<li class="item">3rd Menu
</li>
</ul>

最佳答案

使用 display:inline-block; 和/或 float:left; 作为你的 li。 必须工作!

关于css - 下拉菜单列表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4318344/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com