Позиционирование моего меню css

Question

Я пытаюсь обновить меню веб-сайта моей компании, и мне удалось сделать все, кроме случаев, когда меню расширяет ширину при наведении мыши, уровни 2 и 3 уровня складываются вверху каждого Другие. Я понимаю его, потому что я сделал позиционирование абсолютным, а не относительным, чтобы не допустить, чтобы меню уровня 1 перемещалось вверх и вниз при наведении. У кого-нибудь есть предложения о том, как мне удастся показать подменю и не заставлять главное меню не перемещаться на мышином хове?

вот мой код jsfiddle, http://jsfiddle.net/#&togetherjs=hyRjkxLPGH.

спасибо!

Answer 1

Были проблемы с вашей скрипкой. Прежде всего, единственным элементом, который должен быть внутри тега <ul>, является тег <li>, а не текст. Во-вторых, вы использовали абсолютное позиционирование почти правильно, но вам нужно дать каждому li относительное положение.

Я включил основное (несколько урезанное) решение для вас ниже. Вы также можете найти это на странице this fiddle.

можно вставить свои стили довольно легко, я уверен, что, возможно, использовать больше классов и меньше CSS селекторы (вы когда-либо использовали SCSS?)

HTML

<ul class="menubar"> 
    <li><a href="#">menu1</a> 
    <ul> 
     <li><a href="#">submenu1</a> 
     <ul> 
      <li><a href="#">submenu11</a></li> 
      <li><a href="#">submenu12</a></li> 
      <li><a href="#">submenu13</a></li> 
     </ul> 
     </li> 
     <li>submenu2 
     <ul> 
      <li>submenu21</li> 
      <li>submenu22</li> 
      <li>submenu23</li> 
     </ul> 
     </li> 
     <li>submenu3 
     <ul> 
      <li>submenu31</li> 
      <li>submenu32</li> 
      <li>submenu33</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 

    <li><a href="#">menu2</a> 
    <ul> 
     <li><a href="#">submenu1</a> 
     <ul> 
      <li><a href="#">submenu11</a></li> 
      <li><a href="#">submenu12</a></li> 
      <li><a href="#">submenu13</a></li> 
     </ul> 
     </li>    
     <li>submenu2 
     <ul> 
      <li>submenu21</li> 
      <li>submenu22</li> 
      <li>submenu23</li> 
     </ul> 
     </li> 
     <li>submenu3 
     <ul> 
      <li>submenu31</li> 
      <li>submenu32</li> 
      <li>submenu33</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS

.menubar, .menubar ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.menubar > li { 
    display: inline-block; 
    position: relative; 
} 

.menubar li ul { 
    display: none; 
} 
.menubar li:hover > ul { 
    display: block; 
    position: absolute; 
    width: 100px; 
} 
.menubar li:hover > ul > li { 
    position: relative; 
} 
.menubar > li > ul > li ul { 
    position: absolute; 
    top: 0; 
    left: 100px; 
}