居中子菜单

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