позиционирование моего меню CSS

0

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

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

благодарю!

  • 1
    Примечание: ссылка на режим jsfiddle. довольно сумасшедшие вещи!
  • 0
    о, да, извините, я впервые дал ссылку на сайт, но вот фактическая ссылка jsfiddle.net/2YREN
Показать ещё 1 комментарий
Теги:

1 ответ

1
Лучший ответ

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

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

Вы можете легко вставлять свои стили, я уверен, возможно, используйте больше классов и меньше селекторов 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;
}
Поделиться
  • 0
    Включить jsFiddle?
  • 0
    Хороший совет. Я включил ссылку на скрипку в своем ответе, а также здесь
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню