Есть панель навигации (div id = # nav), в которой находится горизонтальное меню (nav_main_ul). Имеет подменю. Когда я загружаю сайт, появляется основная горизонталь, но при наведении курсора подменю главного меню не появляется. Я пишу:

   .nav_main_ul li a:hover .submenu{
         top:150;
 }

Что не так? Все работало, пока я использую flexbox для боковой панели, контента и нижнего колонтитула.
Я новичок в HTML и CSS. Я думаю, что причина неудачи - конфликт между положением (абсолютным, относительным) и гибким боксом.
Заранее спасибо.

enter image description here

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

#nav {
  left: 0;
  top: 120px;
  background-color: #00004d;
  width: 100%;
}

.nav_main_ul {
  position: relative;
  margin: 0px 0 0 400px;
}

#nav ul {
  height: 50px;
  list-style: none;
  background-color: #00004d;
}

#nav li {
  display: block;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 20px;
  position: relative;
}

#nav li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 10px;
  text-decoration: none;
  line-height: 50px;
}

.nav_main_ul li a:hover {
  background: #000080;
}


/*.nav_main_ul li a:hover .submenu{
    	top:50;
    }*/

.submenu {
  position: absolute;
  width: 250px;
  top: -9999em;
}

.submenu li {
  width: 100%;
  height: 40px;
  background: #00004d;
}

.submenu li a {
  line-height: 50px;
  height: 50px;
  transition: background 0.5s;
}

.submenu li a:hover {
  background-color: red;
}

li:hover .submenu li {
  display: block;
  z-index: 100;
}
<div id="nav">
  <ul class="nav_main_ul">
    <li><a href="">Main</a>
      <ul class="submenu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
      </ul>
    </li>
    <li> <a href="#">News</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Contacts</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
  </ul>
</div>
3
Delphi159 10 Июн 2018 в 01:59

1 ответ

Лучший ответ

Изменить

Привет, Delphi! Чтобы ответить на ваш вопрос о селекторе +, давайте взглянем на вашу разметку HTML:

<li>
  <a href="">Main</a>
  <ul class="submenu">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
  </ul>
</li>

Нам нужно понимать, что в приведенной выше разметке мы можем выразить это как:

LI (Parent / Root)
 - A (Child of LI, Sibling of UL)
 - UL (Child of LI, Sibling of A)
   - LI (Child of UL, Grand-Child of LI)

Ваше желаемое действие: когда пользователь hover находится над A, мы показываем UL.

ОБЫЧНО с CSS мы думаем о вариантах использования NESTED (или РОДИТЕЛЬ / РЕБЕНОК). Но в ВАШЕМ варианте использования A и UL НЕ находятся в отношениях родитель / потомок. Скорее, они братья и сестры.

Итак, мы хотим: когда пользователь наводит курсор на A, мы хотим, чтобы SIBLING (s) для A (в данном случае только UL) имели TOP: 50PX.

В CSS есть ДВА родственных селектора: «Соседний» и «Общий». Соседний означает, что он будет применяться ТОЛЬКО, когда братья и сестры находятся непосредственно вместе. Например:

<div>
    <p></p>
    <span></span>
    <span></span>
    <p></p>
</div>

OR:

DIV
 - P
 - SPAN
 - SPAN 
 - P

Предположим, что в приведенном выше примере мы хотели выбрать каждый SPAN, который является SIBLING для P. Если мы это сделали:

p + span { color : red }

Будет применяться только ПЕРВЫЙ промежуток. Это потому, что это единственный промежуток, который непосредственно находится рядом с элементом P. Демо: http://jsfiddle.net/ucq5pg13/

Что, если бы мы хотели, чтобы ВСЕ промежутки, следующие за буквой P, были красными? Вот где в игру вступает наш ОБЩИЙ родственный селектор:

p ~ span { color: red }

Это говорит о том, что ЛЮБОЙ промежуток, являющийся SIBLING P, который приходит ПОСЛЕ ЭТОГО, будет красным.

Важно отметить, что это ДОЛЖНО быть после. Например:

p ~ span { color: red }

<div>
    <span></span> <!-- I WOULD NOT BE RED -->
    <p></p>
    <span></span> <!-- I WOULD BE RED -->
    <span></span> <!-- I WOULD BE RED -->
    <p></p>
</div>

Демо: http://jsfiddle.net/kb7n5236/

Надеюсь, это поможет :)

Исходный:

Когда вы hover над ссылкой a, вам нужно будет разместить .submenu. Вы можете сделать что-то вроде:

<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
    top: 50px;
}

JSFiddle: http://jsfiddle.net/1us0q4m3/1/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

#nav {
  left: 0;
  top: 120px;
  background-color: #00004d;
  width: 100%;
}

.nav_main_ul {
  position: relative;
  margin: 0px 0 0 400px;
}

#nav ul {
  height: 50px;
  list-style: none;
  background-color: #00004d;
}

#nav li {
  display: block;
  float: left;
  font-family: Arial, sans-serif;
  font-size: 20px;
  position: relative;
}

#nav li a {
  color: #fff;
  display: block;
  height: 50px;
  padding: 0 10px;
  text-decoration: none;
  line-height: 50px;
}

.nav_main_ul li a:hover {
  background: #000080;
}

  
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
    top: 50px;
}

.submenu {
  position: absolute;
  width: 250px;
  top: -9999em;
}

.submenu li {
  width: 100%;
  height: 40px;
  background: #00004d;
}

.submenu li a {
  line-height: 50px;
  height: 50px;
  transition: background 0.5s;
}

.submenu li a:hover {
  background-color: red;
}

li:hover .submenu li {
  display: block;
  z-index: 100;
}
<div id="nav">
  <ul class="nav_main_ul">
    <li><a href="">Main</a>
      <ul class="submenu">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
      </ul>
    </li>
    <li> <a href="#">News</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
    <li><a href="#">Contacts</a>
      <ul class="submenu">
        <li><a href="#">link 5</a></li>
        <li><a href="#">link 6</a></li>
        <li><a href="#">link 7</a></li>
        <li><a href="#">link 8</a></li>
        <li><a href="#">link 9</a></li>
        <li><a href="#">link 10</a></li>
      </ul>
    </li>
  </ul>
</div>
3
Jack 10 Июн 2018 в 00:33