не удалось показать подменю горизонтального меню при наведении - PullRequest
Новая
       9

не удалось показать подменю горизонтального меню при наведении

0 голосов
/ 10 июня 2018

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

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

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

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>

1 Ответ

0 голосов
/ 10 июня 2018

Редактировать

Здравствуйте, 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 s превышает A, мы показываем UL.

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

Итак, что мы хотим, чтобы: когда пользователь наводит курсор на A, мы хотим, чтобы SIBLING (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 }

Только FIRST span будетприменяется.Это потому, что это единственный промежуток, который сразу же находится рядом с элементом P.Демо: http://jsfiddle.net/ucq5pg13/

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

p ~ span { color: red }

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

Это важно дляобратите внимание, что это должно прийти после.Например: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...