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标签并在子菜单上使用可重用的类。