CSS - 居中水平下拉導航

Question

我一直在尋找我的問題的答案，並且大多數人似乎都說使用「text-align：center;」和「display：inline-block」。不過，我仍然無法以響應式的方式讓我的下拉菜單以頁面爲中心。我是編碼新手，所以如果你能指出我正確的方向，那就太棒了。

這裏是我的導航菜單中的HTML：

<nav> 
     <ul id="nav"> 
     <li><a href="#">Skating</a> 
       <ul class="skating"> 
        <li><a href="#">Schedule</a></li> 
        <li><a href="#">Special Sessions</a></li> 
        <li><a href="#">Discount Coupons</a></li> 
        <li><a href="#">Skating Lessons</a></li> 
       </ul></li> 
      <li><a href="#">Party Info</a> 
       <ul class="partyinfo"> 
        <li><a href="#">Birthday Party</a></li> 
        <li><a href="#">Private Party</a></li> 
        <li><a href="#">Adult Skate Party</a></li> 
        <li><a href="#">Fundraisers</a></li> 
        <li><a href="#">Party Forms</a></li> 
       </ul></li> 
      <li><a href="#">Roller Hockey</a> 
       <ul class="hockey"> 
        <li><a href="#">7-10 Year Old</a></li> 
        <li><a href="#">11-14 Year Old</a></li> 
        <li><a href="#">League Information</a></li> 
       </ul></li> 
      <li><a href="#">About Us</a> 
       <ul class="about"> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Directions</a></li> 
        <li><a href="#">Photo Gallery</a></li> 
       </ul></li> 
     </ul> 
</nav> 

這裏是對應的HTML文件

* { 
margin: 0px; 
padding: 0px; 
} 

header { 
text-align: center; 
} 



ul#nav li { 
width: 125px; 
text-align: center; 
position: relative; 
margin-right:5px; 
float: left; 
line-height: 25px; 
border-radius: 10px; 
display: inline-block; 
padding: 5px; 
} 

ul#nav a { 
text-decoration: none; 
display: block; 
width: 125px; 
height: 25px; 
line-height: 25px; 
background-color: #f3f3f3; 
border: 1px solid #ccc; 
border-radius: 5px; 
text-align: center; 
} 

ul#nav, ul.skating, ul.partyinfo, ul.hockey, ul.about { 
list-style-type: none; 
display: inline-block; 
text-align: center; 
font-size: 1em; 

} 

ul#nav li:hover > a { 
background-color: yellow; 
} 

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about { 
display:none; 
} 

ul#nav li:hover ul.skating { 
display: block; 
} 

ul#nav li:hover ul.partyinfo { 
display: block; 
} 

ul#nav li:hover ul.hockey { 
display: block; 
} 

ul#nav li:hover ul.about { 
display: block; 
} 


img.header { 
float:right; 
} 

很抱歉的基本問題的CSS文件，但所有的幫助表示讚賞。如果您看到我的代碼有任何其他問題，請隨時通知我，以便我可以繼續改進。

謝謝。

Answer 1

以下是基本知識。你需要使用的子菜單絕對位置和應用text-align:center父UL

JSfiddle

HTML - 不變

CSS

* { 
margin: 0px; 
padding: 0px; 
} 

ul#nav { 
text-align: center; 
vertical-align:top; 
} 

ul#nav li { 
width: 125px; 
position: relative; 
margin-right:5px; 
line-height: 25px; 
border-radius: 10px; 
display: inline-block; 
padding: 5px; 
} 

ul#nav a { 
text-decoration: none; 
display: block; 
width: 125px; 
height: 25px; 
line-height: 25px; 
background-color: #f3f3f3; 
border: 1px solid #ccc; 
border-radius: 5px; 
text-align: center; 
} 

ul.skating, ul.partyinfo, ul.hockey, ul.about { 
list-style-type: none; 
display: inline-block; 
text-align: center; 
font-size: 1em; 

position: absolute; 
top:100%; 

} 

ul#nav li:hover > a { 
background-color: yellow; 
} 

ul#nav ul.skating, ul.partyinfo, ul.hockey, ul.about { 
display:none; 
} 

ul#nav li:hover ul.skating { 
display: block; 
} 

ul#nav li:hover ul.partyinfo { 
display: block; 
} 

ul#nav li:hover ul.hockey { 
display: block; 
} 

ul#nav li:hover ul.about { 
display: block; 

你會這麼好少用ID標籤並在子菜單上使用可重用的類。