[Проблема]

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

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

.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

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

Originally Posted by WEBCAT

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

Не хочет...

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

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

display: none;

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

Originally Posted by WEBCAT

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

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

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

position: absolute;

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

position: relative;

Originally Posted by WEBCAT

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

так и стоит

.main-menu {
	position: relative;
}

Originally Posted by viliksar

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

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

.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

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

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

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