您好,我想给下拉菜单100%的宽度,但是当我使用向左或向右浮动时,没有一个无效!我如何给菜单宽度100%?
我尝试显示但不起作用我尝试了6小时:|如果有人可以帮助我,我会很累,我真的很高兴:)对不起,我的英语不好
我的html:
<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>
MY CSS:
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;
}
像这样的图像: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>