【问题标题】：how to set width to 100 percent in dropdown menu如何在下拉菜单中将宽度设置为 100%
【发布时间】：2020-03-02 12:39:21
【问题描述】：
您好，我想为下拉菜单提供 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>
喜欢这张图片：
SHOW IMAGE:
【问题讨论】：
标签：
html
css
drop-down-menu
dropdown
fixed-width
【解决方案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>
【解决方案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;}
【解决方案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>