如何:居中水平菜单&子菜单
How To: Center Horizontal Menu & SubMenu
如何将导航菜单和子菜单水平居中?设置一个较小的导航列表"宽度"和设置"Margin:0 auto"不起作用。我还想保持导航栏的背景颜色在整个页面的宽度。
我的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;
}
如果你想在CSS中做到这一点,这里有一个方法:
1。删除#nav li的"float: left;"answers"#nav li:hover ul li, #nav li:hover ul li a"
2。添加"text-align: center;"到"#nav"
3。修复了#nav li:hover ul的width: 100%的问题,在width: 100%后添加;
4。添加"padding: 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;
}
相关文章:
- 水平菜单子菜单
- 如何创建 HTML 文本框,该文本框顶部有一个水平菜单选项卡可供选择
- 加载 Iframe src,并从水平下拉菜单中进行选择
- AngularJs 过渡水平菜单与 ng-show
- 将子菜单添加到水平菜单
- 第二次单击时关闭水平下拉菜单
- 对于移动网络套件,当您触摸/拖动水平菜单栏时,如何使水平菜单栏可滚动
- 如何使水平菜单的按钮起作用
- 水平Javascript菜单错误
- 如何将带有垂直子菜单的水平菜单转换为带有子菜单的垂直手风琴菜单
- 水平滚动菜单(手动)
- 如何在水平菜单中以绝对位置向下推送内容
- 水平菜单和具有公共边界的子菜单,它们也必须在ie7中工作
- 包含具有动态宽度的列表项的无序列表-水平菜单
- jquery上的悬停滑动垂直和水平菜单
- 点击即可水平移动菜单
- CSS垂直导航菜单,带有水平子菜单和半透明带
- 当相对于可用的浏览器窗口没有水平空间时,以相反的方向打开CSS子菜单
- 如何:居中水平菜单&子菜单
- 与水平页面一起滚动的菜单