지난 교과 과정 을 다 배 웠 으 니,나 는 이것 에 대한 학습 이 훨씬 쉬 워 질 것 이 라 고 생각한다.가로 메뉴 는 div 및 자바 Sprict 를 통 해 드 롭 다운 제어,세로 메뉴 는?답 은 긍정 적 이다.우리 가 지금 해 야 할 일 은 세로 메뉴 입 니 다.css 코드:ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute; left:119px; top:0; display:none;} ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;} ul li a:hover { background-color:#ddd;} /*l 이 IE 에서 부정 확 한 문 제 를 표시 하 는 것 을 해결 합 니 다*/* 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 를 사 용 했 습 니 다.그 포 지 셔 닝 방식 을 상대 적 인 포 지 셔 닝 으로 바꾸다.리 l{}즉 하위 내 비게 이 션 은 position:absolute 를 사용 합 니 다.내 비게 이 션 의 절대적 인 포 지 셔 닝 방식 에 비해 마우스 가 상호작용 한 후의 위치 가 일치 합 니 다.css 코드 끝 에 주석 정의 가 추가 되 었 음 을 발 견 했 을 수도 있 습 니 다* html ul li 와* html ul li a。여기 서 쓰 는 게 CSS 예요. hack,이것 은 서로 다른 브 라 우 저 에서 코드 에 대한 분석 이 다 르 기 때문에 각 브 라 우 저 에서 같은 효 과 를 나타 내 는 데 사 용 됩 니 다.이 코드 는 IE 브 라 우 저 만 해석 할 수 있 고 다른 브 라 우 저 는 보이 지 않 습 니 다.이 사례 의 최종 디 스 플레이 효 과 는 다음 과 같 습 니 다.
드 롭 다운 세로 및 다단 계 팝 업 메뉴 www.aa25.cn
