定心 <ul><li> 水平下拉菜單

Question

我無法將此水平列表下拉菜單置於中心位置。 我是否需要重新編寫所有css，因為我正在使用浮動？

以下是與列表位置有關的所有代碼。 或者點擊這里查看它

.megamenu {
margin:auto;
position:absolute;
margin:0;
width:100%;
font-size:1.182em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
border-right: none;
top: -1px;
list-style-type:none;
list-style-position:inside;




.megamenu > li {

    display:inline;
    border:none;
    margin:0;
    float:left;
    padding: 0px 0 0px 30px;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -ms-transition: background-color 0.4s ease-out; 
    border-right: none;
    transition: background-color 0.4s ease-out;

}

任何幫助將不勝感激

Answer 1

我遇到了很多問題，但有一天我終於找到了解決方案。 這是使用表和css自動邊距。 這是我的伎倆。 只需更改中心td的寬度並添加導航。

<table>
<td style="margin:0 auto;">
</td>
<td width="800"> <----Change this to the width of your nav bar.

PUT THE NAVIGATION HERE

</td>
<td style="margin:0 auto;">
</td>
</table>

Answer 2

根據我的理解，您不應該在內聯元素中嵌套塊級元素。 話雖這么說，我已經創建了這個JSFiddle解決方案 ，簡化了HTML並將帶有“內容”的<div>替換為子無序列表。 （理論上，如果你願意，這個只有一個<li>子列表應該能夠將<div>與內容保持在一起。）

因此HTML是：

<ul id="menu">
    <li>Home
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>One day
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>I wish to
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Be in the
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Centre of this page
        <ul>
            <li>Content</li>
        </ul>
    </li>
</ul>​

CSS設置如下：

#menu {
    text-align: center;
    height: 30px;
}

#menu li {
    list-style: none;
    display:inline-block;
    margin: 5px 15px;
}

#menu li ul {
    display: none;
}

#menu li:hover ul {
    display: block;
    position: absolute;
    top: 30px; /* height of menu */
    left: 25px;
    right: 25px;
}

在JSFiddle中，我添加了一些顏色，以明確哪個元素在哪里。 我也刪除了你在實例中的動畫CSS，但這應該很簡單。

這種方法依賴於給菜單一個絕對高度 - 在這個例子中為30px - 然后絕對定位在其下方懸停時出現的“content” <div> top: 30px （或者菜單高度恰好是什么）。

Answer 3

有很多不同的方法可以做到這一點 - 你需要給它一個寬度，而不是100％。 這可以嗎？

然后在寬度到位的情況下，您可以在ul上使用display:inline ，在父div上使用text-align:center ，或者使用margin:auto 。

如果這沒有幫助，請告訴我，我會為你做一個小提琴:)