Позиционирование вложенного меню навигации

Я изучаю CSS и пытаюсь запустить вложенное меню навигации. Я могу плавать основные элементы и складывать все дочерние элементы под ним, но относительное положение для дочерних меню не работает. Я намерен переместить элементы дочернего меню вправо относительно своего родителя. Пожалуйста, дайте мне знать, где я ошибаюсь.Позиционирование вложенного меню навигации

<!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <style> 
     *{ 
      margin:0; 
      padding:0; 
     }  
     h1{ 
     text-align: center; 
     text-decoration: underline; 
     margin-bottom: 10px; 
     } 
     li{ 
     list-style: none; 
     } 
     ul li a{ 
     text-decoration: none; 
     display: block; 
     width:100px; 
     height: 25px; 
     border: 1px solid green; 
     text-align: center; 
     } 
     .main > li{ 
     float:left; 
     position: relative; 
     } 

     .main > li > li { 
     position: absolute; 
     top:0px; 
     left:10px; 
     } 
    </style> 
    </head> 
    <body> 
    <h1>Hello Plunker!</h1> 
    <ul class="main"> 
     <li><a href="#">Menu 1</a> 
     <ul class="sub1"> 
      <li><a href="#">Menu 1.1</a> 
      <ul class="sub2"> 
       <li><a href="#">Menu 1.1.1</a></li> 
       <li><a href="#">Menu 1.1.2</a></li> 
       <li><a href="#">Menu 1.1.3</a></li> 
       <li><a href="#">Menu 1.1.4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Menu 1.2</a></li> 
      <li><a href="#">Menu 1.3</a></li> 
      <li><a href="#">Menu 1.4</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     <li><a href="#">Menu 4</a></li> 
    </ul> 
    </body> 
</html>

Ссылка на Plnkr - Plnkr Link

источник

2016-02-18 zilcuanu

Не уверен, что вы хотите, чтобы это выглядело! – Gacci

Основной проблемой является то, что ваш селектор:

.main > li > li

Выбирает ничего.

Этот > означает «непосредственный потомок». Там только непосредственным потомком к .main > li является ul, поэтому селектор следует читать:

.main > li > ul

И, как только вы, что работает, то вы можете скрыть ул (при нормальных условиях) и показать его на парении:

.main > li > ul { 
    display: none; 
    position: absolute; 
    top:27px; 
    left:10px; 
    } 

    .main > li:hover ul { 
    display: block; 
    }

Смотреть эту revised plunker

РЕДАКТИРОВАНИЕ
Ваш вопрос не очень понятно. Я просто осознал, что просматриваю код в плункере, чтобы вы также захотели получить под-подменю.

Я пересмотрел плункер, так что это правильно. В принципе, вам также необходимо установить положение/отображение суб-подменю. Пересмотренный CSS ниже:

main > li > ul { 
    display: none; 
    position: absolute; 
    top:27px; 
    left:10px; 
    } 

    .main > li > ul > li > ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 
    display: none; 
    } 

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

И, в то время как мы в этом, вам не нужен float: left. Float - это то, что имеет очень специфическое, практическое применение - и это не один из них. Измените его просто на display: inline-block, и вы настроены без других последствий использования float. (Примечание: при отображении встроенного блока вы можете заметить, что элементы nav размещены на расстоянии около 4 пикселей - это связано с whitespace и имеет простое решение (подсказка: это this answer)

источник

2016-02-18 13:42:44

Позиционирование вложенного меню навигации

ответ

Смежные вопросы