css - CSS3下拉全宽

我正在尝试制作一个CSS3下拉菜单，该菜单覆盖页面的整个宽度。我尝试编辑当前代码，但没有任何良好结果。

如果我编辑ul，li并将宽度设置为20％，则只有悬停按钮更改为该大小。似乎没有显示活动按钮的一半。我已经摆弄很长时间了，由于所有尝试都没有结果，我感到非常沮丧。

有人可以帮我还是给我一些建议？非常感谢，所以请不要害羞地帮助有需要的初学者！

祝你今天愉快。

对不起，忘了摆弄小提琴：

http://jsfiddle.net/dennis2society/hEGut/

HTML：

<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='#'>Pupils</a>
</li>
<li><a href='#'>Juniors</a>
</li>
<li><a href='#'>Seniors</a>
</li>
</ul>
</li>
<li><a href='#'>Competition</a>
<ul>
<li><a href='#'>Pupils</a>
</li>
<li><a href='#'>Juniors</a>
</li>
<li><a href='#'>Seniors</a>
</li>
</ul>
</li>
<li><a href='#'>About Us</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>

CSS：

#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after, #cssmenu ul:after {
content:'';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #646464 url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu li ul li {
text-align: center;
}
#cssmenu li ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}

最佳答案

您已经快到了，只需要在第一级li和display:block及其子锚元素上声明宽度：

#cssmenu > ul > li {
             /* width here:*/
    float: left;width:20%;
}
#cssmenu > ul > li a {
    display:block;
    /* the other stuff*/
}

Your modified fiddle

ps。漂亮的设计！但是，您应该使用几种不同的浏览器进行检查，Chome和Firefox / IE之间存在一些差异。

关于css - CSS3下拉全宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22149017/