居中子菜單

Question

我讀過關於居中子菜單的所有問題。但我沒有解決我的問題。

我有一個簡單的導航欄有2個子菜單​​。您可以在這裏找到它：Fiddle。

ul#nav, ul#sub1, ul#sub2 { 
 
\t list-style-type: none; 
 
} 
 
ul#nav { 
 
\t position: relative; 
 
} 
 
ul#nav li { 
 
\t width: 125px; 
 
\t text-align: center; 
 
\t float: left; 
 
\t margin-right: 4px; 
 
} 
 
ul#nav a { 
 
\t text-decoration: none; 
 
\t display: block; 
 
\t width: 125px; 
 
\t height: 25px; 
 
\t line-height: 25px; 
 
\t background-color: #FFF; 
 
\t border: 1px solid #CCC; 
 
\t border-radius: 5px; 
 
\t color: #000; 
 
} \t 
 
ul#sub1 a, ul#sub2 a { 
 
\t margin-top: 4px; 
 
} 
 
ul#nav li:hover > a { 
 
\t background-color: #6E6E6E; 
 
\t color: #FFF; 
 
} 
 
ul#nav li:hover a:hover { 
 
\t background-color: #E2E2E2; 
 
\t color: #000; 
 
} 
 
ul#sub1, ul#sub2 { 
 
\t display: none; 
 
\t position: absolute; 
 
\t left: 0px; 
 
} 
 
ul#nav li:hover ul#sub1 { 
 
\t display: block; 
 
} 
 
ul#sub1 li:hover ul#sub2 { 
 
\t display: block; 
 
}

<nav> 
 
\t <ul id="nav"> 
 
    \t <li><a href="#">Reisen</a> 
 
     \t <ul id="sub1"> 
 
      \t <li><a href="#">Europa</a></li> 
 
       <li><a href="#">Amerika</a></li> 
 
       <li><a href="#">Asien</a> 
 
       \t <ul id="sub2"> 
 
        \t <li><a href="#">Thailand</a></li> 
 
         <li><a href="#">Bhutan</a></li> 
 
         <li><a href="#">China</a></li> 
 
         <li><a href="#">Vietnam</a></li> 
 
         <li><a href="#">Japan</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">Afrika</a></li> 
 
       <li><a href="#">Australien</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Magazin</a></li> 
 
     <li><a href="#">Karriere</a> 
 
      <ul id="sub1"> 
 
       <li><a href="#">Thema 1</a></li> 
 
       <li><a href="#">Thema 2</a></li> 
 
       <li><a href="#">Thema 3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Kontakt</a></li> 
 
    </ul> 
 
</nav>

我想爲中心的子菜單。當我將鼠標懸停在「Reisen」上時，子菜單會獲得與主菜單相同的寬度。 當我將鼠標懸停在「Karriere」上時，我希望子菜單位於「Karriere」下方，而不是位於「Reisen」的左側。

我正在考慮按鈕「Karriere」跨度元素，但我無法解決它。

感謝您的幫助。

Answer 1

我現在不是真的如果這是你要找的或不是，但也許是這樣的？

注：我做你的CSS和HTML一些變化，主要是改變一切，而不是使用的ID

JS Fiddle Example

HTML

<nav> 
<ul id="nav"> 
    <li><a href="#">Reisen</a> 
     <ul class="sub"> 
      <li><a href="#">Europa</a></li> 
      <li><a href="#">Amerika</a></li> 
      <li><a href="#">Asien</a> 
       <ul class="sub-second"> 
        <li><a href="#">Thailand</a></li> 
        <li><a href="#">Bhutan</a></li> 
        <li><a href="#">China</a></li> 
        <li><a href="#">Vietnam</a></li> 
        <li><a href="#">Japan</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Afrika</a></li> 
      <li><a href="#">Australien</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Magazin</a></li> 
    <li><a href="#">Karriere</a> 
     <ul class="sub"> 
      <li><a href="#">Thema 1</a></li> 
      <li><a href="#">Thema 2</a></li> 
      <li><a href="#">Thema 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Kontakt</a></li> 
</ul> 

類

CSS

ul#nav, ul.sub { 
    list-style-type: none; 
} 
ul#nav { 
    position: relative; 
} 
ul#nav li { 
    width: 125px; 
    text-align: center; 
    float: left; 
    margin-right: 4px; 
    position: relative; 
} 
ul#nav a { 
    text-decoration: none; 
    display: block; 
    width: 125px; 
    height: 25px; 
    line-height: 25px; 
    background-color: #FFF; 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    color: #000; 
} 
ul.sub a { 
    margin-top: 4px; 
} 
ul#nav li:hover > a { 
    background-color: #6E6E6E; 
    color: #FFF; 
} 
ul#nav li:hover a:hover { 
    background-color: #E2E2E2; 
    color: #000; 
} 
ul.sub { 
    display: none; 
    position: absolute; 
    left: 0px; 
    padding-left: 0; 
} 

ul.sub-second { 
    display: none; 
    list-style: none; 
    left:100px; 
    top: 0; 
    position: absolute; 
} 

ul#nav li:hover ul.sub { 
    display: block; 
} 

ul#nav li:hover ul.sub li:hover ul.sub-second { 
    display:block; 
} 
}