CSS 웹 페이지 레이아웃 입문 튜토리얼 14: 수직 드롭다운 및 다단계 팝업 메뉴_기본 튜토리얼

이전 튜토리얼을 마친 후에는 이 섹션을 배우는 것이 훨씬 쉬울 것이라고 생각합니다.
가로 메뉴는 div 및 JavaStrict를 통해 드롭다운 컨트롤을 구현합니다. 대답은 '예'입니다. 이제 해야 할 일은 세로 메뉴입니다. CSS 코드:

ul { margin:0; list-style:none; border-bottom:1px solid #ccc; - 크기:12px;}
ul li { 위치:상대적;}
li ul { 위치:절대:119px; 상단:0;}
ul li a { 너비:108px ; 디스플레이:블록; 텍스트-장식:없음; 배경:#fff; 테두리:1px; border-bottom:0px;}
ul li a:hover color :#ddd;}
/*IE에서 ul이 잘못 표시되는 문제 해결*/
* html ul li { float:left; height:1%;}
* html ul li a { height :1%;}
/* end */
li:hover ul,li.over ul { display:block;}


CSS 코드 작성은 기본적으로 수평을 유지합니다. 방향 탐색에도 동일한 아이디어가 사용되지만 차이점은 탐색과 기본 탐색 사이의 상대 위치를 유지하면서 위치를 지정하기 위해 ul li{}에 대해 position:relative를 사용한다는 것입니다. 상대 위치 지정. 즉, li ul{}의 경우 하위 탐색은 위치:절대를 사용합니다. 탐색에 상대적인 절대 위치 지정 방법은 마우스 상호 작용 후 위치를 일관되게 만듭니다.
아마도 주석 정의 * html ul li 및 * html ul li a가 CSS 코드 끝에 추가되었음을 알아차렸을 것입니다. 여기에 사용된 CSS 해킹은 서로 다른 브라우저가 코드를 다르게 구문 분석하고 각 브라우저에서 동일한 효과를 달성하는 데 사용되기 때문입니다. 이 코드는 IE 브라우저에서만 분석할 수 있으며, 다른 브라우저에서는 눈에 띄지 않습니다.
이 예제의 최종 표시 효과는 다음과 같습니다.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>