웹사이트를 탐색하다 보면 드롭다운 메뉴의 효과를 자주 볼 수 있기 때문에 웹페이지 개발 중에 드롭다운 메뉴를 사용해야 하는 경우가 있습니다. 오늘의 글에서는 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 드롭다운 메뉴의 효과는 다음과 같습니다.
설명: 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>
드롭다운 메뉴의 효과는 다음과 같습니다.
참고: 위 코드에서 호버 선택기는 다음 작업에 사용됩니다. 사용자가 드롭다운 버튼 드롭다운 메뉴로 마우스를 이동할 때 표시됩니다.
이 기사는 여기서 끝납니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 칼럼을 주목하세요! ! !
위 내용은 HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!