HTML의 드롭 다운 메뉴 구현

Question

HTML과 CSS를 사용하여 가로 방향 탐색 바를 만들고 있습니다. 이 작업은 간단하고 쉽게 완료되었습니다. 그런 다음 원래 탐색 바에있는 각 링크에 드롭 다운 메뉴를 포함하기로 결정했습니다.

예제 할당으로 세 개의 링크 "Dropdown1", "Dropdown2", "Dropdown3"이있는 가로 탐색 모음을 만든 다음이 세 링크 각각에 드롭 다운 메뉴를 추가했습니다. 각 드롭 다운 메뉴는 3 개의 추가 링크 만 포함해야합니다. (총 3x3 = 9 개의 드롭 다운 링크.이 드롭 다운 링크의 번호는 link01에서 link09까지입니다). 네비게이션 바의

스크린 샷

문제는 모든 드롭 다운 링크가 각 탐색 모음 링크와 연결된 얻을 것입니다 연결합니다. 나는

Dropdown1 및 Dropdown3가 공중 선회 할 때 동일 적용 유사한 출력을 얻고있다. 이상적으로 Dropdown1 위에 마우스를 올리면 Link01, Link02 및 Link03 만 표시되어야합니다. 마찬가지로 Dropover2 위에 마우스를 올리면 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로 코드를 검증하면 무언가를 묻고 싶을 때도 생각할 수 있습니다.

두 번째로, 스 니펫 기능을 사용해보십시오.

마지막으로 솔루션의 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; 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>

I가 CSS3 열을 사용하고 있습니다 :

당신이, 당신이 뭔가를 사용할 수 있습니다 표시된 모든 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;} 
 
.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>

위.