누군가가 오늘 말한 또 다른 예를 들어 봅시다 : Pure CSS 드롭 다운 메뉴 :
복제 다이어그램
이것의 구현은 주로 매우 간단합니다. 호버 및 전환 속성 전환 사용.
암호:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin : 0; 패딩 : 0; 글꼴 크기 : 16px; Font-Family : "Microsoft Yahei"; } #container {너비 : 100px; 여백 : 0 Auto; 텍스트 정렬 : 센터; 위치 : 상대; } #Container UL {List-Style : 없음; } #container span {display : 인라인-블록; 너비 : 100px; 높이 : 30px; 라인 높이 : 30px; 커서 : 포인터; } #container ul {높이 : 0; 너비 : 100px; 오버플로 : 숨겨진; 전환 : 모두 1s; 위치 : 절대; 상단 : 30px; 왼쪽 : 0px; } #container : hover ul {높이 : 330px; } #container ul li {배경 : #eee; 마진-탑 : 3px; 커서 : 포인터; 높이 : 30px; 라인 높이 : 30px; . 여기 </li> </ul> </div> </body> </html>UL은 스케일링 객체이므로 문서 흐름과 분리되어야합니다. 실용적 일 때 레이아웃에 영향을 미치지 않으며 절대적인 위치를 제공하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.