如何居中这些菜单元素？

Question

我该如何居中这个下拉菜单？菜单出现在左侧，而不是中央。这让我很难过。文本对齐：中心没有为我工作。提前谢谢你。

<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> 

Answer 1

你不想父容器是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>