[Проблема] Не появляется суб меню

11-09-2018, 06:32 PM

Верстаю макет. Делаю суб меню так:

HTML Code:

<nav class="main-navigation">
    <ul class="main-menu">
      <li><a href="#">Link</a>
        <ul class="sub-menu">
          <li><a href="#">Суб меню</a></li>
          <li><a href="#">Суб меню</a></li>
        </ul>
      </li>
      <li class="b-left"><a href="#">Link</a></li>

HTML Code:

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

li:hover .sub-menu {
  display: block;
}

Но оно при наведении не хочет появляться. Подскажите пожалуйста в чем моя ошибка? Залил верстку сюда - test.ucenic.info

11-09-2018, 11:23 PM

HTML Code:

.sub-menu li:hover{
  display: block;
}

11-09-2018, 11:45 PM

Quote:

Originally Posted by WEBCAT

HTML Code:

.sub-menu li:hover{
  display: block;
}

Не хочет...

11-10-2018, 12:05 AM

Для проверки правильности вёрстки

Если убрать из CSS

HTML Code:

display: none;

то меню должно быть видно.

11-10-2018, 12:28 AM

Quote:

Originally Posted by WEBCAT

то меню должно быть видно.

В моем случае, еще необходимо отключить позиционирование.
На сколько я понимаю, где то ошибка у меня в разметке, но не вижу и все...

11-10-2018, 12:42 AM

Для правильного позицирования стиля

HTML Code:

position: absolute;

main-menu
или
main-navigation
должны иметь в CSS

HTML Code:

position: relative;

11-10-2018, 10:56 AM

Quote:

Originally Posted by WEBCAT

main-menu
или
main-navigation
должны иметь в CSS

так и стоит

HTML Code:

.main-menu {
	position: relative;
}

11-10-2018, 11:47 AM

Quote:

Originally Posted by viliksar

так и стоит
Код HTML:
.main-menu {
position: relative;
}

Тогда проблема в выборе параметров позицирования меню.
Смотри позицирование по вертикали. Для начала сделай его равным нулю (top: 0;)

HTML Code:

.sub-menu {
  position: absolute;
  z-index:999;
  top: 0;
  left: 0px;
  width: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

WEBCAT добавил 10.11.2018 в 10:47
Отсутствует закрывающий тег для nav

HTML Code:

<nav class="main-navigation">
---------------------
---------------------
</nav>

Отсутствует закрывающий тег для ul

HTML Code:

<ul class="main-menu">
--------------------
--------------------
</ul>