CSS 레이아웃 예: 좋은 CSS+JS 2단계 메뉴

<DIV ID=xcx_tabmenu>
<DIV 클래스=cx_tabmenu id=cx_tabmenu>
<DIV ID=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">홈</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">회사</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">제품</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">우리의 작업</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">뉴스</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">저장</A> </DIV>
<BR style="지우기: 왼쪽">
<DIV ID=탭콘텐츠컨테이너>
<DIV 클래스=tabcontent id=sc1></DIV>
<DIV 클래스=탭콘텐츠 ID=sc2><A
href="http://www.downcodes.com/">회사 소개</A> <A
href="http://www.downcodes.com/">우리는 무엇을 합니까?</A> <A
href="http://www.downcodes.com/">팀을 만나보세요</A> <A
href="http://www.downcodes.com/">우리와 협력해야 하는 이유</A> <A
href="http://www.downcodes.com/">품질 정책</A> <A
href="http://www.downcodes.com/">약관</A> <A
href="http://www.downcodes.com/">추천서</A> <A
href="http://www.downcodes.com/">클렉서스 투어</A> </DIV>
<DIV 클래스=탭콘텐츠 ID=sc3><A
href="#">클렉서스 프라이빗
메시지</A> <A href="#">이미지
갤러리</A> <A href="#">고객
관리</A> <A
href="#">템플릿
작동합니다</A> </DIV>
<DIV 클래스=탭콘텐츠 ID=sc4><A
href="#">웹
디자인</A> <A
href="#">웹
개발</A> <A
href="#">로고
디자인</A> <A
href="#">인쇄
디자인</A> </DIV>
<DIV 클래스=탭콘텐츠 ID=sc5><A
href="#">클렉서스 뉴스</A>
<A href="#">Joomla
뉴스</A> <A
href="#">일반 뉴스</A>
</DIV>
<DIV 클래스=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

본문{텍스트 정렬:중심}
.cx_tabmenu {
패딩 상단: 2px; 배경색: #474747;WIDTH: 790px;
}
#ddimagetabs {
패딩-왼쪽: 10px
}
#ddimagetabs A {
PADDING-RIGHT: 20px; BORDER-TOP: 1px 솔리드; PADDING-LEFT: 20px; 배경: #363636; MARGIN-RIGHT: 2px, PADDING-TOP: 0px, 글꼴 계열: Verdana, Arial, Helvetica, sans-serif: 텍스트 정렬: 없음
}
#ddimagetabs A:hover {
테두리 상단: #ffffff 1px 단색; 배경: url(../images/cx_menu_hover.jpg) #363636 반복 없음 중앙 하단;
}
#ddimagetabs A.current {
테두리 상단: #ffffff 1px 단색; 배경: url(../images/cx_menu_hover.jpg) #363636 반복 없음 중앙 하단;
}
A.sclink:링크 {

}
A.sclink:방문 {

}
A.sclink:hover {

}
#slink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
테두리 상단: #ff9900 1px 솔리드
}
#ddimagetabs .current#sclink1 {
테두리 상단: #ff9900 1px 솔리드
}
#sc1 A:링크 {

}
#sc1 A:방문 {

}
#sc1 A:호버 {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
테두리 상단: #990099 1px 솔리드
}
#ddimagetabs .current#sclink2 {
테두리 상단: #990099 1px 솔리드
}
#sc2 A:링크 {

}
#sc2 A:방문 {

}
#sc2 A:호버 {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
테두리 상단: #0099cc 1px 솔리드
}
#ddimagetabs .current#sclink3 {
테두리 상단: #0099cc 1px 솔리드
}
#sc3 A:링크 {

}
#sc3 A:방문함 {

}
#sc3 A:호버 {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
테두리 상단: #78ba00 1px 솔리드
}
#ddimagetabs .current#sclink4 {
테두리 상단: #78ba00 1px 솔리드
}
#sc4 A:링크 {

}
#sc4 A:방문 {

}
#sc4 A:호버 {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
테두리 상단: #99cccc 1px 솔리드
}
#ddimagetabs .current#sclink5 {
테두리 상단: #99cccc 1px 솔리드
}
#sc5 A:링크 {

}
#sc5 A:방문 {

}
#sc5 A:호버 {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
테두리 상단: #999999 1px 솔리드
}
#ddimagetabs .current#sclink6 {
테두리 상단: #999999 1px 솔리드
}
#sc6 A:링크 {

}
#sc6 A:방문함 {

}
#sc6 A:호버 {

}
#ddimagetabs #sclink7 {
패딩-오른쪽: 30px; 테두리-상단: #ff0000 단색: 30px 배경: #363636; 색상: #d7dcbe
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px solid; BACKGROUND: url(../images/cx_menu_hover_my.jpg) #cf1919 반복 없음 중앙 하단
}
#ddimagetabs .current#sclink7 {
BORDER-TOP: #ef7777 1px solid; BACKGROUND: url(../images/cx_menu_hover_my.jpg) #cf1919 반복 없음 중앙 하단
}
#sc7 A:링크 {

}
#sc7 A:방문 {

}
#sc7 A:호버 {

}
#tabcontentcontainer {
배경: url(../images/sub_menu_bg.jpg) #fcfcfa 반복-x: 너비: 790px;
}
.tabcontent {
디스플레이: 없음; PADDING-TOP: 4px
}
.tabcontent A:링크 {
PADDING-RIGHT: 10px; FONT-SIZE: 11px; FLOAT: 왼쪽; MARGIN-LEFT: 3px; 글꼴 계열: Verdana, Arial, Helvetica, sans-serif: 높이: 18px;
}
.tabcontent A:방문 {
PADDING-RIGHT: 10px; FONT-SIZE: 11px; FLOAT: 왼쪽; MARGIN-LEFT: 3px; 글꼴 계열: Verdana, Arial, Helvetica, sans-serif: 높이: 18px;
}
.tabcontent A:hover {
배경: url(../images/cx_submenu_hover_grey.jpg) 반복 없음 중앙 하단 색상: #000000
}
#active_submenu {
배경: url(../images/cx_submenu_hover.jpg) #666666 반복 없음 중앙 하단 색상: #fff
}