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

【问题标题】：How To: Center Horizontal Menu & SubMenu如何：居中水平菜单和子菜单
【发布时间】：2015-10-21 07:58:53
【问题描述】：

如何将此导航菜单和子菜单水平居中？设置较小的导航列表“宽度”和设置“边距：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;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果你想用 CSS 做到这一点，方法如下：

1.删除“浮动：左;” "#nav li" 和 "#nav li:hover ul li, #nav li:hover ul li a"

2.添加“文本对齐：居中；”到“#nav”

3.修正“#nav li:hover ul”的“width: 100%”并添加“;”在“宽度：100%”之后

4.添加“填充：0；”到“#nav li:hover 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;
}

【讨论】：