구현 방법:
(추천 튜토리얼: CSS 튜토리얼)
1. ul 및 li 태그를 사용하여 연관 구조를 작성합니다. (ul과 li의 상위-하위 관계는 자연스럽고 다음에서 사용됩니다. 일반 연관 구조)
<ul class="nav"> <a href="#">服装</a> <ul class="plat"> <li><a href="#">衬衫</a></li> <li><a href="#">棉袄</a></li> <li><a href="#">裤衩</a></li> </ul> </ul>
2. 인터페이스 초기화(일률적으로 시작)
*{ padding: 0; margin: 0; }
3. ul 및 태그에 스타일을 추가합니다(여기에서 자유롭게 플레이할 수 있습니다)
ul,a{ font-size: 20px; list-style: none; text-decoration: none; background-color: #3C3C3C; color: #FFFFFF; width: 100px; text-align: center; border: 0px solid black; border-radius: 5px; /*圆角*/ margin-top: 1px; } a{ display: block; }
4. .plat 부분의 내용
.plat{ display: none; }
5. (여기에 강조 표시가 있습니다.) 사용: 첫 번째 a 태그에 대한 호버 선택기 기능 실현: 마우스가 a 태그 위로 이동하면 내용의 숨겨진 부분이 표시됩니다
.nav:hover .plat{ display: block; clear: both; }
6. 사용자 경험을 최적화하기 위해 자신만의 스타일을 추가할 수 있습니다.
예:
수평으로 배열된 메뉴 막대:
.nav{ float: left; margin-left: 1px; }
열 위로 마우스를 슬라이드하면 해당 위치가 표시됩니다
`.plat li:hover>a{ background-color: dimgrey; }`
효과 :
(학습 영상 추천: css 영상 튜토리얼)
모든 코드:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul,a{ font-size: 20px; list-style: none; text-decoration: none; background-color: #3C3C3C; color: #FFFFFF; width: 100px; text-align: center; border: 0px solid black; border-radius: 5px; margin-top: 1px; } a{ display: block; } .plat{ display: none; } .nav{ float: left; margin-left: 1px; } .nav:hover .plat{ display: block; clear: both; } .plat li:hover>a{ background-color: dimgrey; } </style> </head> <body> <ul> <a href="#">服装</a> <ul> <li><a href="#">衬衫</a></li> <li><a href="#">棉袄</a></li> <li><a href="#">裤衩</a></li> </ul> </ul> <ul> <a href="#">服装</a> <ul> <li><a href="#">衬衫</a></li> <li><a href="#">棉袄</a></li> <li><a href="#">裤衩</a></li> </ul> </ul> <ul> <a href="#">服装</a> <ul> <li><a href="#">衬衫</a></li> <li><a href="#">棉袄</a></li> <li><a href="#">裤衩</a></li> </ul> </ul> </body> </html>
위 내용은 간단한 드롭다운 메뉴 효과를 구현하는 순수 CSS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!