DIV 메뉴 레이어 구현 code_javascript 기술

QQ몰 카테고리 메뉴를 스크린샷으로 찍어주셨는데요, 효과는 이렇습니다.

가져보니 어! 저희 블로그 공원도 이런데요! 저는 이 효과를 직접 해본 적이 없어서 그냥 직접 해보고 싶었어요! (저는 아티스트는 아니지만 js에 대해 조금 알고 있습니다!)
1. 분석:
1. 오른쪽의 큰 카테고리는 레이어 아래에 divMenuContent로 표시되어야 합니다.
2. 왼쪽에 마우스가 위로 움직이는 것이 레이어이기도 하고, 그 아래에는 divMenuItem
으로 표현되어 있습니다. 질문: 그림과 같이 표현하려면 어떻게 해야 하나요? 좌우측이 일체형처럼 보이죠! 그래서 divMenuItem의 오른쪽은 아무것도 없고 z축이 divMenuContent보다 높아서 divMenuContent의 테두리만 누르면 된다고 생각했어요!
두 레이어의 스타일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

# divMenuItem
{
위치:absolute;
z-index:99;
너비:147px;
테두리:3px solid #963 ;
경계-오른쪽:0px;
디스플레이:없음
}
{
디스플레이:없음; 위치:절대값:98;
폭:505px;
경계:3px
배경색:#FC9; }


그런 다음 테스트할 페이지를 레이아웃합니다.




코드를 복사합니다.

코드는 다음과 같습니다.

< ;body>

aaaaaaaaaaaaa

bbbbbbbbbbbbbb

cccccccdccccc

🎜>< ;li> eeeeeeeeeeeeee

ffffffffffff

> ul>