如何：居中水平菜单和子菜单

Question

如何水平居中此导航菜单和子菜单？设置较小的导航列表“宽度”并设置“边距：0自动”不起作用。我还希望在页面的整个宽度上保留导航栏的背景颜色。

我的HTML：

<div class="slide-down-page"> 
    <ul id="nav"> 
    <li id= "bio"><a class="active btn" href="home.html">Bio</a></li> 
    <li id= "portfolio"><a href="portfolio.html">Portfolio</a> 
     <ul> 
      <li><a href="#">Writing</a> 
      </li> 
      <li><a href="#">Illustrations</a></li> 
      <li><a href="#">Design</a></li> 
     </ul> 
    </li> 
    <li id= "contact"><a href="contact.html">Contact</a></li> 
    </ul> 
</div> 

我的CSS：

#nav{ 
margin: 0 ; padding: 0; 
position: fixed; 
width: 100%; 
background:#e7e7e7; 
} 

#nav li { 
list-style: none; 
display: inline-block; 
float: left; 
} 

#nav li a{ 
padding: 1em 2em; 
display: inline-block; 
text-decoration: none; 
color: #F2583E; 
font-family: 'Helvetica Neue'; 
font-size:1.25em; 
background: #e7e7e7; 
text-align: center; 
margin: 0 auto; 
} 

#nav li a:hover{ 
background-color: #C1DAD6; 
} 

#nav a.active, #nav li:hover a.active{ 
background-color: #F2583E; 
color: #F7F3E8; 
cursor: default; 
} 

/*SubMenu*/ 
#nav li ul{ 
display: none; 
} 

#nav li:hover ul{ 
display: block; 
position: absolute; 
top: 63px; 
width: 100% 
left:0px; 
background: #C1DAD6; 
color:white; 
} 

#nav li:hover ul li, #nav li:hover ul li a{ 
display: inline-block; 
float: left; 
padding: 5px; 
color:white; 
background: #C1DAD6; 
} 

#nav li ul li:hover a{ 
color: #77bed2; 
} 

#nav li ul li{ 
_display: inline-block; /* for IE5*/ 
} 

#nav li ul li a{ 
width: 150px; 
} 

Answer 1

如果你想在这里CSS要做到这一点的方法：

1.去除 “浮动：左;” “#nav li”和“#nav li：hover ul li，#nav li：hover ul li a”

2.add“text-align：center;”到“#nav”

“#nav li：hover ul”的3.fix“width：100％”加上“;”在“宽度：100％”之后

4.add“padding：0;”以 “#nav李：悬停UL”

因此，这里是固定的CSS代码：

#nav{ 
margin: 0 ; padding: 0; 
position: fixed; 
width: 100%; 
background:#e7e7e7; 
text-align:center; 
} 

#nav li { 
list-style: none; 
display: inline-block; 
} 
#nav li a{ 
padding: 1em 2em; 
display: inline-block; 
text-decoration: none; 
color: #F2583E; 
font-family: 'Helvetica Neue'; 
font-size:1.25em; 
background: #e7e7e7; 
text-align: center; 
margin: 0 auto; 
} 

#nav li a:hover{ 
background-color: #C1DAD6; 
} 

#nav a.active, #nav li:hover a.active{ 
background-color: #F2583E; 
color: #F7F3E8; 
cursor: default; 
} 

/*SubMenu*/ 
#nav li ul{ 
display: none; 
} 

#nav li:hover ul{ 
display: block; 
position: absolute; 
top: 63px; 
width: 100%; 
padding: 0; 
left:0px; 
background: #C1DAD6; 
color:white; 
} 

#nav li:hover ul li, #nav li:hover ul li a{ 
display: inline-block; 
padding: 5px; 
color:white; 
background: #C1DAD6; 
} 

#nav li ul li:hover a{ 
color: #77bed2; 
} 

#nav li ul li{ 
_display: inline-block; /* for IE5*/ 
} 

#nav li ul li a{ 
width: 150px; 
}