CSS3 下拉全宽

Question

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

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

有人可以帮助我或给我一些建议吗？我们将不胜感激，所以请不要羞于帮助有需要的初学者!

祝你有美好的一天。

抱歉忘记放 fiddle 了:

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;
}

Answer 1

你几乎就在那里，你所需要的只是第一层的宽度声明 li 和 display:block 及其子 anchor 元素:

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

Your modified fiddle

附注不错的设计!但是，你应该用几个不同的浏览器检查一下，Chome 和 Firefox/IE 之间有一些区别。