이 기사는 HTML+CSS를 사용하여 마우스를 구현하는 두 번째 레벨 메뉴 표시 줄의 예를 소개합니다.
효과 도면의 첫 번째 :
1. 마우스는 위에 있지 않습니다
2. 첫 번째 레벨 메뉴에 마우스를 넣고 보조 메뉴를 확장하십시오.
3. 보조 메뉴에 마우스를 넣습니다
암호:
<html> <head> <title> 두 번째 레벨 메뉴 테스트 </title> <meta charset = utf-8> <스타일 유형 = text/css>/*중간*/body {padding -top : 100px; 텍스트-rign;} / * ------------------------- --------------------------------------------------------- --------------------------------------------------------- --------------------------------------------------------- -------------------- * / .menudiv {2px Solid #Aac; 태그의 다운 라인* / .menudiv a {text-decics : none;} /* set ul and li style* / .men udiv ul, menudiv li {list 스타일 : 0; float : left;} /* 두 번째 레벨 메뉴 절대 위치를 설정하고 숨기고 숨기십시오* /.menudiv> ul> ul {Position : None;} /* 두 번째 레벨 메뉴의 LI 스타일을 설정하십시오. /.menudiv> li> ul> li {float : none;} /* 첫 번째 레벨 메뉴에 배치되어 보조 메뉴를 표시* /.menudiv> ul> li : hover ul {display;} /* 1 -레벨 메뉴* /. } /* 첫 번째 레벨 메뉴에서 첫 번째 왼쪽 상자* /.menudiv> li : First-Child> a {Border-Hered : None;} /* 일류 메뉴에서 마우스의 스타일* /.menudiv> ul> li> a : 호버 {color : #f0f; #bcf;} /* 두 번째 레벨 메뉴* /.menudiv> ul> li> ul> a {width : 120px; 라인 히트 : #456; 상단 베젤 설정* / .menudiv> li> li : First-Child> a {Border-Top : 1px Solid #ccc;} /* 보조 메뉴에서 마우스 스타일이 배치됩니다* / .menudiv> ul > li> li> a : hover {color : #a4f; -- 끝 ----------------------------------------------- --------------------------------------------------------- ------ Body> <! -------- 메뉴 HTML 코드 ----------------------------- class = menudiv> <ul> <li> <a href =#> 메뉴 One </a> <ul> <li> <a href =#> 두 줄 메뉴 </a> </li> <a href = #> 보조 메뉴 </a> </li> <li> <a href =#> Second -Level 메뉴 </a> </li> </ul> </li> <a href =#> 메뉴 2 </a> <ul> <li> <a href =#> 두 번째 -레벨 메뉴 </a> </li> <li> <a href =#> 두 줄 메뉴 </a> </li > </li> <li> <li> <a href =#> 메뉴 3 </a> <ul> <li> <a href =#> 보조 메뉴 </a> </li> <a href =# > 2 차 메뉴 </a> </li> <li> <a href =#> Second -Level 메뉴 </a> </li> <li> <a href =#> 보조 메뉴 </a> </li > <li> <a href =#> Second -Level 메뉴 </a> </li> </ul> </li> <li> <a href =#> 메뉴 4 </a> </li> < href =#> 메뉴 5 </a> <ul> <li> <a href =#> 두 번째 메뉴 </a> </li> <li> <a href =#> 두 번째 메뉴 </a> </ li> <li> <a href =#> ii 메뉴 </a> </li> </ul> </ul> </div> <--------- --- -------- 끝 -----------> </body> </html>위는이 기사의 모든 내용입니다.