Меню сайта не разворачивается при наведении :hover. Где может быть ошибка?

Question

[Салихимов Руслан]

Вот код html:

<nav class="main-menu">
  			<ul>
  				<li><a href="#"><i class="fa fa-home"></i>Main</a></li>
  				<li><a href="#"><i class="fa fa-home"></i>Kind plant</a></li>
  				<li><a href="#"><i class="fa fa-home"></i>Places of growth</a>
  					<ul>
  						<li><a href="#">Nouth America</a></li>
  						<li><a href="#">South America</a></li>
  						<li><a href="#">Europe</a></li>
  						<li><a href="#">Africa</a></li>
  						<li><a href="#">Asia</a></li>
  						<li><a href="#">Australia</a></li>
  					</ul>
  				</li>
  				<li><a href="#"><i class="fa fa-home"></i>Plant History</a></li>
  				<li><a href="#"><i class="fa fa-home"></i>Environmental issues</a></li>
  				<li><a href="#"><i class="fa fa-home"></i>Our contacts</a></li>
  			</ul>
  		</nav>

Здесь CSS:

body {
  background: url(../img/bg-cloud.jpg) no-repeat center;
  background-size: 125%;
}
header {
  position: relative;
}
header .flora-header {
  position: absolute;
  right: -4rem;
  top: 22rem;
}
header p {
  position: fixed;
  right: 0rem;
  margin-top: 5rem;
  margin-right: 2rem;
  font-size: 4rem;
  font-weight: bold;
  color: #6797C9;
  text-transform: uppercase;
}
.main-menu {
  margin: 0;
  padding: 0;
}
.main-menu ul {
  padding-left: 5px;
}
.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-top: 20rem;
  padding: 5px;
  border: solid 2px #6797C9;
  border-radius: 10px;
  margin-left: 2px;
  background: #FFF;
}
.main-menu ul li a {
  font-size: 0.9rem;
  color: #6797C9;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
.main-menu ul li i {
  margin-right: 5px;
}
.main-menu ul li ul {
  position: absolute;
  top: 35px;
  display: none;
}
.main-menu ul li ul:hover {
  display: block;
  background: #6797C9;
  color: #FFF;
}
.main-menu ul li ul li {
  display: block;
  margin-left: -12px;
  margin-top: 6px;
}
.main-menu li:hover {
  background: #6797C9;
  color: #FFF;
}
.main-menu li:hover a {
  color: #FFF;
}

Весь день потратил на поиск ошибки...

Answer 1

[lamer350]

так где

.main-menu ul li ul:hover {
  display: block;
}

надо чтобы было:

.main-menu ul li:hover ul {
  display: block;
}

Comments

[Салихимов Руслан]

Спасибо! не знал, что после hover нужно продолжение.

[lamer350]

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

[lamer350]

Салихимов Руслан, но вам скорее всего там придется использовать сразу 2 состояния:

.main-menu ul li:hover ul,
.main-menu ul li ul:hover{
  display: block;
}

Так как .main-menu ul li ul с абсолютным позиционирование он выпадает из потока и не будет считаться дочерним элементом .main-menu ul li, потому у вас будет глюк, как только вы захотите перейти с пункта li на ваш подсписок ul он будет пропадать, потому в силу вступить правило уже когда наведено на ul дочерний .main-menu ul li ul:hover то он же должен остаться видимым.

[Салихимов Руслан]

Я попробовал добавить .main-menu ul li ul:hover{} - добавление ни на что не влияет. Первый вариант устранил проблему. Тэг ul после hover показывает к какому тэгу применить значение block?

[lamer350]

Салихимов Руслан, да

[Салихимов Руслан]

lamer350, Спасибо, очень помог!

Answer 2

[ildar-meyker]

Просветление обычно приходит через 2 дня.
https://codepen.io/ildar-meyker/pen/WNoeLBx