Выпадающее меню тега HTML5

Я работаю над меню HTML5 dorpdown для удовольствия. Я читал в W3Schools о выпадающем меню, но все они используют классы CSS и id.Выпадающее меню тега HTML5

HTML-код:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Super cool drop down menu</title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#Home">Home</a></li> 
      <li> 
       <a href="#">Super cool drop down menu!</a> 
       <ul> 
        <li><a href="#Link1">Link 1</a> 
        <li><a href="#Link2">Link 2</a> 
        <li><a href="#Link3">Link 3</a> 
       </ul> 
      </li> 
      <li><a href="#Contact">Contact</a></li> 
     </ul> 
    </nav> 


    <h3>Super cool dropdown menu</h3> 
    <p>Ga met je muis op Super cool dorp down menu! staan om de linkjes te tonen.</p> 
</body> 
</html>

style.css имеет следующий код:

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

nav ul li { 
    float: left; 
} 

nav ul li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

nav ul li a:hover, nav ul li ul li { 
    background-color: #f1f1f1; 
    display: block; 
} 

nav ul li ul { 
    display: inline-block; 
} 

nav ul li ul li { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

nav ul li ul li a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
}

Я думаю, что я получил это почти работает, но он не показывает элементы Li второй уль , Может ли кто-нибудь сказать мне, что я делаю неправильно?

источник

2016-11-20 StuiterSlurf

Основная проблема заключается в том, что вы устанавливаете вложенные элементы списка в "display: none".

nav ul li ul li { 
    display: none; 
    ... 
}

Если вы хотите, чтобы они появились, когда элемент родитель литий наведен использовать что-то вроде следующего CSS:

nav ul li:hover ul li { 
    display: block; 
    ... 
}

Я сделал jsfiddle, чтобы поиграть с ним:

https://jsfiddle.net/1zq1s9ea/

Возможно, произошли некоторые другие незначительные изменения, которые я сделал, например, закрытие всех тегов «li», но тот, который вам нужен, был тем, который я упомянул выше.

источник

2016-11-20 17:52:30 pulekies

Спасибо большое! – StuiterSlurf

У меня появился еще один вопрос. Мой код показывает последний элемент элемента списка. Он не отображает список должным образом. Знаете ли вы, что я делаю неправильно? https://jsfiddle.net/1zq1s9ea/2/ – StuiterSlurf

Вы абсолютно позиционируете все элементы списка в этом меню, поэтому все они появляются в верхней части меню. Вместо этого попробуйте абсолютно позиционировать ul и позиционируйте li-элементы относительно их родителя. https://jsfiddle.net/1zq1s9ea/3/ Способ, которым я исследовал проблему, заключался в использовании инструментов разработчика Chrome (нажать f12, когда сайт открыт в Chrome). Вы можете проверить элементы на странице и увидеть все позиции элементов (даже невидимые) и то, что css применяется к ним. – pulekies

Выпадающее меню тега HTML5

ответ

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