如何将此下拉菜单置于中心位置?菜单以左边对齐的方式出现,而不是中心。这让我很难过。 text-align:center对我不起作用。非常感谢你提前。
<style>
#dropnav
{text-align: center; width: 960px; margin: 0 auto; display: inline-block; }
#dropnav ul
{text-align: center;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#dropnav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#dropnav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#dropnav ul li.current-menu-item
{
background:#ddd
}
#dropnav ul li:hover
{
background:#f6f6f6
}
#dropnav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#dropnav ul ul li
{
float:none;
width:200px
}
#dropnav ul ul a
{
line-height:120%;
padding:10px 15px
}
#dropnav ul ul ul
{
top:0;
left:100%
}
#dropnav ul li:hover > ul
{
display:block
}
</style>
HTML
<nav id="dropnav">
<ul>
<li class="current-menu-item"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul></nav>
答案 0 :(得分:0)
您不希望父容器为inline-block
,而是希望它为block
。并且您不希望在顶级菜单中浮动li
- 改为创建inline-block
,然后删除标记中这些元素之间的空格,以便它们之间没有间隙在屏幕上。
#dropnav {
text-align: center;
width: 960px;
margin: 0 auto;
}
#dropnav ul {
text-align: center;
list-style: none;
position: relative;
margin: 0;
padding: 0
}
#dropnav ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#dropnav ul li {
position: relative;
display: inline-block;
margin: 0;
padding: 0
}
#dropnav ul li.current-menu-item {
background: #ddd
}
#dropnav ul li:hover {
background: #f6f6f6
}
#dropnav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#dropnav ul ul li {
float: none;
width: 200px
}
#dropnav ul ul a {
line-height: 120%;
padding: 10px 15px
}
#dropnav ul ul ul {
top: 0;
left: 100%
}
#dropnav ul li:hover > ul {
display: block
}
<nav id="dropnav">
<ul>
<li class="current-menu-item"><a href="#">Option 1</a></li><li><a href="#">Option 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>
</nav>