Внедрение выпадающего меню в HTML

Question

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

В качестве примера я создал горизонтальную навигационную панель с тремя ссылками «Dropdown1», «Dropdown2», «Dropdown3», а затем добавил раскрывающиеся меню к каждой из этих трех ссылок. Каждое выпадающее меню должно содержать только три дополнительные ссылки. (В общей сложности 3x3 = 9 выпадающих ссылок. Эти выпадающие ссылки пронумерованы link01 через link09).

Скриншот панели навигации ссылки

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

то же самое относится, когда Dropdown1 и Dropdown3 которые колебались. В идеале, наведите указатель мыши на Dropdown1, чтобы отображать только Link01, Link02 и Link03. Подобным образом наведите указатель мыши на Dropdown2, чтобы показать только Link04, Link05 и Link06 и так далее.

HTML-код, который я написал

<ul> 
<div class="dropdown"> 
<li> 

<a href="#"> Dropdown1</a> 
<div class ="dropdown-content"> 
<a href="#">Link01</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link02</a> 
<a href="#">Link03</a> 
</div> 

</li> 

<li> 
<a href="#"> Dropdown2</a> 
<div class ="dropdown-content"> 
<a href="#">Link04</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link05</a> 
<a href="#">Link06</a> 
</div> 
</li> 
<li> 
<a href="#"> Dropdown3</a> 
<div class ="dropdown-content"> 
<a href="#">Link07</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link08</a> 
<a href="#">Link09</a> 
</div> 
</li> 
</div> <!--closing the dropdown container--> 

чем подвох?

Answer 1

Прежде всего, ваш код является неправильным. Это недействительный HTML. Пожалуйста, подтвердите свой код с помощью W3C Validator, прежде чем вы даже придумаете что-нибудь, когда хотите что-то спросить.

Во-вторых, попробуйте использовать функцию Snippet.

Наконец, проверьте часть CSS для вашего решения.

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;} 
 
a {color: #fff; text-decoration: none; display: block;} 
 
.menu {display: inline-block; background-color: #999;} 
 
.menu::after {content: " "; display: block; clear: both;} 
 
.menu > li {float: left; position: relative;} 
 
.menu li a {padding: 15px;} 
 
.menu li:hover > a {background-color: #333;} 
 
.menu ul {display: none; background-color: #999; left: 0; right: 0;} 
 
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu"> 
 
    <li> 
 
    <a href="">Dropdown 1</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 2</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 3</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Если вы хотите, чтобы все 9 ссылок отображается, вы можете использовать что-то вроде этого:

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;} 
 
a {color: #fff; text-decoration: none; display: block;} 
 
.menu {display: inline-block; background-color: #999; position: relative;} 
 
.menu::after {content: " "; display: block; clear: both;} 
 
.menu > li {float: left;} 
 
.menu li a {padding: 15px;} 
 
.menu li:hover > a {background-color: #333;} 
 
.menu ul {display: none; background-color: #999; left: 0; right: 0; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; column-count: 3;} 
 
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu"> 
 
    <li> 
 
    <a href="">Dropdown 1</a> 
 
    <ul> 
 
     <li><a href="">Link 1-01</a></li> 
 
     <li><a href="">Link 1-02</a></li> 
 
     <li><a href="">Link 1-03</a></li> 
 
     <li><a href="">Link 1-04</a></li> 
 
     <li><a href="">Link 1-05</a></li> 
 
     <li><a href="">Link 1-06</a></li> 
 
     <li><a href="">Link 1-07</a></li> 
 
     <li><a href="">Link 1-08</a></li> 
 
     <li><a href="">Link 1-09</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 2</a> 
 
    <ul> 
 
     <li><a href="">Link 2-01</a></li> 
 
     <li><a href="">Link 2-02</a></li> 
 
     <li><a href="">Link 2-03</a></li> 
 
     <li><a href="">Link 2-04</a></li> 
 
     <li><a href="">Link 2-05</a></li> 
 
     <li><a href="">Link 2-06</a></li> 
 
     <li><a href="">Link 2-07</a></li> 
 
     <li><a href="">Link 2-08</a></li> 
 
     <li><a href="">Link 2-09</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 3</a> 
 
    <ul> 
 
     <li><a href="">Link 3-01</a></li> 
 
     <li><a href="">Link 3-02</a></li> 
 
     <li><a href="">Link 3-03</a></li> 
 
     <li><a href="">Link 3-04</a></li> 
 
     <li><a href="">Link 3-05</a></li> 
 
     <li><a href="">Link 3-06</a></li> 
 
     <li><a href="">Link 3-07</a></li> 
 
     <li><a href="">Link 3-08</a></li> 
 
     <li><a href="">Link 3-09</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

я использовал CSS3 столбцов для вышесказанное.