Создание выпадающих кнопок на панели навигации с помощью CSS3

Question

Идти, чтобы отредактировать это, так как я упрямый идиот, который видел ошибку своего пути. Более или менее тот же вопрос о том, как создать раскрывающуюся группу ссылок на горизонтальной панели навигации, но на этот раз с использованием ul и li.

До сих пор я сделал это большой прогресс:

<nav> 
    <ul class="width"> 
     <li><a ...</li> 
     <li><a ... 
      <ul> 
       <li><a ...</li> 
       <li><a ...</li> 
       <li><a ...</li> 
      </ul> 
     </li> 
     <li><a ...</li> 
    </ul> 
</nav> 

CSS:

nav ul{width:100%;text-align:justify;font-size:0;} 
nav ul:after{content:"";width:100%;display:inline-block;} 
nav li{list-style:none;display:inline-block;} 
nav a{display:inline-block;padding:10px;} 
nav ul ul{display:none;} 

Однако, это еще не закончена, так как я не уверен, как прогресс здесь. В настоящее время этот код скрывает содержимое, которое будет отображаться в раскрывающемся меню, но нет кода, чтобы сделать его видимым снова. Гиды, которые я видел, используют поплавки. Это абсолютно необходимо?

Answer 1

Вам все равно придется обернуть ссылку для выпадающего списка своими подчиненными ссылками. Как это:

HTML:

<nav class="bg"> 
    <div class="navwrap width"> 
     <div class="nav"> 
      <a href="#">Link1</a> 
      <div class='dropdown'> 
       <a href="#">Link2</a> 
       <div class='droplinks'> 
        <a href='#'>Drop Link 1</a> 
        <a href='#'>Drop Link 1</a> 
       </div> 
      </div> 
      <a href="#" id="dropdown2">Link3</a> 
      <a href="#">Link4</a> 
     </div> 
    </div> 
</nav> 

Новый CSS:

.dropdown{ 
    padding: 0; 
    position:relative; 
    width: 100px; 
    display:block; 
    float:left; 
} 
.dropdown a { 
    width: 100%; 
} 
.droplinks{ 
    position:absolute; 
    top:100%; 
    left:0; 
    display:none; 
    height:0; 
    transition: height 0.2s linear; 
} 
.dropdown a:hover ~ .droplinks{ 
    display:block; 
    height: 150px; 
} 
.droplinks:hover { 
    display:block; 
    height: 150px; 
} 

Смотрите эту fiddle. Это всего лишь примерный пример, вам нужно будет скорректировать некоторое выравнивание и все такое, но я думаю, вы можете это сделать. Это было главным образом показать вам, как работает выпадающее действие.