센터링 하위 메뉴

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

내가 찾고있는 것이거나 그렇지 않은 것 같은데 지금은 그런 것이 아닌가?

참고 : 나는 주로 모든 것을 대신

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> 

ID의 클래스를 사용하는 변경, 당신의 CSS와 HTML에 몇 가지 변경을

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