HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴를 구현하는 방법-HTML 튜토리얼-php.cn

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴를 구현하는 방법

不言

풀어 주다： 2018-10-19 11:42:15

원래의

21467명이 탐색했습니다.

웹사이트를 탐색하다 보면 드롭다운 메뉴의 효과를 자주 볼 수 있기 때문에 웹페이지 개발 중에 드롭다운 메뉴를 사용해야 하는 경우가 있습니다. 오늘의 글에서는 html 드롭을 구현하는 방법을 알려드리겠습니다. -다운 메뉴. 도움이 필요한 친구가 참조할 수 있습니다.

더 이상 고민하지 말고 바로 본문으로 들어가겠습니다~

HTML에는 단일 선택 및 다중 선택 메뉴를 만들 수 있는 선택 태그가 있습니다. 선택 태그의 옵션 속성은 사용 가능한 옵션을 정의하는 데 사용됩니다. 목록.

html 드롭다운 메뉴의 구체적인 코드를 살펴보겠습니다.

<html>
<body>
<form>
<select name="cars">
<option value="city">城市</option>
<option value="hefei">合肥</option>
<option value="wuhu">芜湖</option>
<option value="nanjing">南京</option>
<option value="gaoyou">高邮</option>
</select>
</form>
</body>
</html>

로그인 후 복사

html 드롭다운 메뉴의 효과는 다음과 같습니다.

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴를 구현하는 방법

설명: select 요소는 다음과 같습니다. 사용자 입력을 받아들이는 양식에서 사용할 수 있는 양식 컨트롤입니다.

위의 HTML 드롭다운 메뉴는 너무 단조롭게 느껴집니다. 다음으로 CSS를 사용하여 더 보기 좋은 드롭다운 메뉴를 구현하는 방법을 살펴보겠습니다.

html+css 구현됨 드롭다운 메뉴 코드:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .a{
    width: 200px;
    }
    .b{
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: lightblue;
    font-size: 30px;
    }
    .c{
    height: 200px;
    width: 100px;
    display: none;
    background: gray;
    }
    .b:hover{
    background: green;
    cursor: pointer;
    }
    .a:hover .c{
    display: block;
    }
    a{
    display: block;
    text-decoration: none;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #ccc;
    }
    a:hover{
    background: green;
    color: pink;
    }    
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
    <div class="c">
    <a href="#">合肥</a>
    <a href="#">南京</a>
    <a href="#">芜湖</a>
    <a href="#">高邮</a>
    <a href="#">上海</a>
    </div>
    </div>
    </body>
    </html>

로그인 후 복사

드롭다운 메뉴의 효과는 다음과 같습니다.

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴를 구현하는 방법