如何在下拉菜单中将宽度设置为100%

Question

你好，我想给我的下拉菜单100%的宽度，但当我使用向左或向右浮动时，没有一个是无效的！如何将此菜单的宽度设为100%？

我尝试展示但不工作我试了6个小时，我很累，如果有人能帮我的话，我真的很高兴：(很抱歉我的英语不好

我的代码：

body,
ul,
li {
margin: 0px;
padding: 0px;
background-color: #0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: right;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
background-color: #CC0;
}
body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
display: block;
}
li:hover {
background-color: #CC0;
cursor: pointer;
}
li:hover>ul {
display: block;
}

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

---

如下图所示：显示图像：

Answer 1

更改CSS

li ul {
display: none;
background-color: #CC0;
width:100%;
position: absolute;
left: 0;
}
body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
display: block;
float: left;
}

body,
ul,
li {
margin: 0px;
padding: 0px;
background-color: #0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: right;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
background-color: #CC0;
width:100%;
position: absolute;
left: 0;
}
body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
display: block;
float: left;
}
li:hover {
background-color: #CC0;
cursor: pointer;
}
li:hover>ul {
display: block;
}

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

Answer 2

添加到css 下方

body {background: #0CF;}
ul {width: 100%;list-style: none;padding: 0;margin: 0;}
body > ul {float: left;position: relative;border-bottom: 1px solid #000;}
body > ul > li {font-family: verdana;font-size: 12px;color: #333;line-height: 40px;float: right;padding: 0 20px;}
body > ul > li:hover ul {display: block;}
body > ul ul {display: none;position: absolute;top: 100%;left: 0;width: 100%;border-bottom: 1px solid #000;z-index: 1;}
body > ul ul > li {float: left;padding: 10px 20px;}

Answer 3

希望这对您有所帮助。

body,
ul,
li {
margin: 0px;
padding: 0px;
background-color: #0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: right;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
background-color: #CC0;
}
body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
display: block;
}
li:hover {
background-color: #CC0;
cursor: pointer;
}
li:hover>ul {
display: block;
}
ul.sub {
width: 100%;
position: absolute;
left: 0;
}

<ul>
<li>Item 1</li>
<li>Item 2
<ul class="sub">
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul class="sub">
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>