如何在下拉菜单中将宽度设置为 100%
how to set width to 100 percent in dropdown menu
你好,我想为我的下拉菜单提供 100% 的宽度,但是当我向左或向右浮动时,none 不起作用!我怎样才能给这个菜单 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:
改变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>
在下方添加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;}
希望对您有所帮助。
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>
你好,我想为我的下拉菜单提供 100% 的宽度,但是当我向左或向右浮动时,none 不起作用!我怎样才能给这个菜单 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:
改变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>
在下方添加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;}
希望对您有所帮助。
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>