Отображение каскадного ul как inline-block не работает - PullRequest
Новая
       0

Отображение каскадного ul как inline-block не работает

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

Я хочу отобразить перечисленные элементы (Список 1) внутри перечисленных элементов (Список 2), и я хочу, чтобы элементы <li> первого списка отображались встроенными, а элементы <li> внутри каждого первого <li> были отображается вертикально при наведении. Проблема в том, что при наведении курсора на первую главную <li>, вторая основная <li> будет отображаться в конце первой основной <li>, что не ожидается:

enter image description here

Следующее отображение проблемы в режиме реального времени: https://codepen.io/alafawzi/pen/PaVYyB

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

ul li {
  display: inline-block;
  padding: 15px;
}

ul li ul li{
  margin: 0;
  padding: 0;
  display: none;
}

ul li:hover ul li{
  display: block;
}
<body>
  <header>
    Html5 begins
  </header>

  <nav>
    <ul>
      <li><a href="#">div</a>
        <ul>
          <li>Link1.1</li>
          <li>Link1.2</li>
          <li>Link1.3</li>
        </ul>
      </li>
      <li><a href="#">head</a>
         <ul>
         <li>Link2.1</li>
          <li>Link2.2</li>
          <li>Link2.3</li>
        </ul>
    </ul>
  </nav>

</body>

1 Ответ

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

Вам необходимо добавить абсолютную позицию в sub ul. 

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}

ul li {
  display: inline-block;
  padding: 15px;
  position: relative;
}

ul li ul{
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;  
}

ul li:hover ul{
  display: block;
}
<body>
  <header>
    Html5 begins
  </header>

  <nav>
    <ul>
      <li><a href="#">div</a>
        <ul>
          <li>Link1.1</li>
          <li>Link1.2</li>
          <li>Link1.3</li>
        </ul>
      </li>
      <li><a href="#">head</a>
         <ul>
         <li>Link2.1</li>
          <li>Link2.2</li>
          <li>Link2.3</li>
        </ul>
    </ul>
  </nav>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...