CSS3下拉全寬

Question

我正在嘗試製作一個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; 
} 

Answer 1

你幾乎沒有，所有你需要的是一個寬聲明在第一級li和display:block個他們的孩子錨元素：

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

Your modified fiddle

附：不錯的設計！但是，你應該檢查幾個不同的瀏覽器，Chome和Firefox/IE之間有一些區別。