Как создать выпадающее меню из ссылки в навигационной панели

Я пытаюсь создать раскрывающееся меню, которое падает вниз по ссылке в навигационной панели, когда она зависала. Я не уверен, как скрыть список ссылок в раскрывающемся списке, а затем показать их, когда правильная ссылка зависнет. Любая помощь будет оценена по достоинству.Как создать выпадающее меню из ссылки в навигационной панели

Мой HTML до сих пор

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dropdown Menu</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li> 
       <a href="#">Products</a> <!-- link that creates dropdown menu --> 
       <ul class="dropdown"> <!-- dropdown menu list --> 
        <li><a href="#">Engineering</a></li> 
        <li><a href="#">Technical</a></li> 
        <li><a href="#">Other</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Something</a></li> 
      <li><a href="#">Last</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

Мой CSS до сих пор

body { 
    margin: 0; 
} 
nav { 
    background-color: green; 
} 

a { 
    text-decoration: none; 
    color: white; 
} 

ul { 
    list-style: none; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding-right: 10px; 
} 

a:hover { 
    color: yellow; 
} 

.dropdown { 
    display: none; 
}

источник

2017-01-07 jtc10

Попробуйте использовать это:

ul{ 
 
     padding: 0; 
 
     list-style: none; 
 
     background: green; 
 
    } 
 
    ul li{ 
 
     display: inline-block; 
 
     position: relative; 
 
     line-height: 21px; 
 
     text-align: left; 
 
    } 
 
    ul li a{ 
 
     display: block; 
 
     padding: 8px 25px; 
 
     color: #fff; 
 
     text-decoration: none; 
 
    } 
 
    ul li a:hover{ 
 
     color: #fff; 
 
     background: #000; 
 
    } 
 
    ul li ul.dropdown{ 
 
     min-width: 100%; /* Set width of the dropdown */ 
 
     background: green; 
 
     display: none; 
 
     position: absolute; 
 
     z-index: 999; 
 
     left: 0; 
 
    } 
 
    ul li:hover ul.dropdown{ 
 
     display: block; \t /* Display the dropdown */ 
 
    } 
 
    ul li ul.dropdown li{ 
 
     display: block;}

<nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li> 
 
       <a href="#">Products &#9662;</a> <!-- link that creates dropdown menu --> 
 
       <ul class="dropdown"> <!-- dropdown menu list --> 
 
        <li><a href="#">Engineering</a></li> 
 
        <li><a href="#">Technical</a></li> 
 
        <li><a href="#">Other</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Something</a></li> 
 
      <li><a href="#">Last</a></li> 
 
     </ul> 
 
    </nav>

источник

2017-01-07 20:16:44 bulldozer

Общий Идея состоит в том, чтобы назначить класс CSS событию наведения для основных элементов навигации, так что если элемент nav наводится и этот элемент навигации имеет вложенное меню, отобразите вложенное меню при наведении.

Это рабочая демонстрация.

* {margin:0;padding:0;} 
 
body { 
 
    margin: 0; 
 
} 
 
nav { 
 
    background-color: green; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
    position: relative; 
 
} 
 

 
a:hover { 
 
    color: yellow; 
 
} 
 

 
.dropdown { 
 
    display: none; 
 
} 
 

 
li:hover .dropdown { 
 
    display: block; 
 
    position: absolute; 
 
} 
 

 
ul ul a { 
 
    color: green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Dropdown Menu</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li> 
 
       <a href="#">Products</a> <!-- link that creates dropdown menu --> 
 
       <ul class="dropdown"> <!-- dropdown menu list --> 
 
        <li><a href="#">Engineering</a></li> 
 
        <li><a href="#">Technical</a></li> 
 
        <li><a href="#">Other</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Something</a></li> 
 
      <li><a href="#">Last</a></li> 
 
     </ul> 
 
    </nav> 
 
</body> 
 
</html>

источник

2017-01-07 20:18:55

Как создать выпадающее меню из ссылки в навигационной панели

ответ

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