[英]How to get the correct width for a drop down menu
I have a menu with a dropdown on it, the problem that im having is the width of the dropdown, im trying to have the ul the same size as the parent li
, but i don't know what am i doing wrong. 我有一个带有下拉菜单的菜单,问题是即时消息的宽度是下拉菜单的大小,即时消息试图让ul与父级li
大小相同,但我不知道我在做什么错。
I tried changing the position of the dropdown from absolute
to relative
, but if I do that it movesthe content area down. 我尝试将下拉列表的位置从absolute
更改为relative
,但如果这样做,它将向下移动内容区域。
Demo: https://jsfiddle.net/5y0cgs1z/ 演示: https : //jsfiddle.net/5y0cgs1z/
can somebody explinme what am i doing wrong. 有人可以解释我在做什么错。
.topMenu ul ul
{
position: absolute/relative(with both i got a problem);
}
HTML: HTML:
<div class="topMenu">
<ul>
<div id="wrapper">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Consectetur Adipiscing</a>
<ul>
<li><a href="#">Nemo enim</a></li>
<li><a href="#">Nemo enim</a></li>
<li><a href="#">Nemo enim</a></li>
</ul>
</li>
<li><a href="#">Nemo enim</a></li>
<li><a href="#">Voluptatem </a></li>
<li><a href="#">Neque porro</a>
<ul>
<li><a href="#">Nemo enim</a></li>
</ul>
</li>
<li><a href="#">Quis autem</a></li>
<li><a href="#">Nam libero</a></li>
</div>
</ul>
</div>
</header>
<br>
<div class="content" id="wrapper">
<ul class="list-under">
<li>The standar rum. </p>
</li>
<li>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laud </p>
</li>
<li>1914 translation by H. Rackham
<p>On the other hand, we denounce . </p>
</li>
</ul>
</div>
CSS: CSS:
*
{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body
{
background-color: #c1c1c1;
}
#wrapper
{
width: 960px;
margin: 0 auto;
padding: 0 auto;
}
.content
{
background-color: #fff;
padding: 10px;
}
.topMenu ul
{
height: 43px;
background: black;
}
.topMenu ul li
{
float: left;
list-style: none;
}
.topMenu ul li a
{
padding: 12px 15px;
display: block;
color: white;
text-decoration: none;
border-right: 1px solid #4a4848;
}
.topMenu ul li:first-child a
{
border-left: 1px solid #4a4848;
}
.topMenu ul li a:hover, .topMenu ul li a:focus
{
background: green;
transition: .4s;
}
.topMenu ul ul
{
position: absolute;
width: 100%;
background: #232222;
height: auto;
left: -9999em;
}
.topMenu ul li:hover ul,
.topMenu ul li.hover ul
{
left: auto;
transition: .4s;
}
.topMenu ul ul li
{
float: none;
border-top: 1px solid #4f4d4d;
}
.clear
{
clear: both;
}
Simply add position: relative
to .topMenu ul li
. 只需添加position: relative
对于.topMenu ul li
。 You want the submenus to behave in relation to their parent li
and not the topMenu
container. 您希望子菜单相对于其父li
而不是topMenu
容器表现。
.topMenu ul li
{
float: left;
list-style: none;
position: relative;
}
jsFiddle fork: https://jsfiddle.net/azizn/casrm2qj/ jsFiddle分支: https ://jsfiddle.net/azizn/casrm2qj/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.