CSS布局实例：一个不错的CSS+JS两级菜单

<DIV id=xcx_tabmenu>
      <DIV class=cx_tabmenu id=cx_tabmenu>
      <DIV id=ddimagetabs>
      <A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Home</A> 
      <A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Company</A>
      <A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Products</A>
      <A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Our Works</A>
      <A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">News</A>
      <A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Store</A>     </DIV>
      <BR style="CLEAR: left">
      <DIV id=tabcontentcontainer>
      <DIV class=tabcontent id=sc1></DIV>
      <DIV class=tabcontent id=sc2><A 
      href="http://www.downcodes.com/">About Us</A> <A 
      href="http://www.downcodes.com/">What do we do?</A> <A 
      href="http://www.downcodes.com/">Meet The Team</A> <A 
      href="http://www.downcodes.com/">Why work with us?</A> <A 
      href="http://www.downcodes.com/">Quality policy</A> <A 
      href="http://www.downcodes.com/">Terms</A> <A 
      href="http://www.downcodes.com/">Testimonials</A> <A 
      href="http://www.downcodes.com/">Clexus Tour</A> </DIV>
      <DIV class=tabcontent id=sc3><A 
      href="#">Clexus Private 
      Messaging</A> <A href="#">Image 
      Gallery</A> <A href="#">Customer 
      Management</A> <A 
      href="#">Template 
      Works</A> </DIV>
      <DIV class=tabcontent id=sc4><A 
      href="#">Web 
      Design</A> <A 
      href="#">Web 
      Development</A> <A 
      href="#">Logo 
      Design</A> <A 
      href="#">Print 
      Design</A> </DIV>
      <DIV class=tabcontent id=sc5><A 
      href="#">Clexus News</A> 
      <A href="#">Joomla 
      News</A> <A 
      href="#">General News</A> 
      </DIV>
      <DIV class=tabcontent id=sc6></DIV>
      </DIV></DIV></DIV>

body{text-align:center}
.cx_tabmenu {
    PADDING-TOP: 2px; BACKGROUND-COLOR: #474747;WIDTH: 790px;
}
#ddimagetabs {
    PADDING-LEFT: 10px
}
#ddimagetabs A {
    PADDING-RIGHT: 20px; BORDER-TOP: #666666 1px solid; DISPLAY: inline; PADDING-LEFT: 20px; FONT-SIZE: 12px; BACKGROUND: #363636; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #989898; LINE-HEIGHT: 33px; MARGIN-RIGHT: 2px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 33px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
#ddimagetabs A:hover {
    BORDER-TOP: #ffffff 1px solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 no-repeat center bottom; COLOR: #d7dcbe
}
#ddimagetabs A.current {
    BORDER-TOP: #ffffff 1px solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 no-repeat center bottom; COLOR: #d7dcbe
}
A.sclink:link {
    
}
A.sclink:visited {
    
}
A.sclink:hover {
    
}
#sclink1 {
    
}
#ddimagetabs #sclink1 {
    
}
#ddimagetabs #sclink1:hover {
    BORDER-TOP: #ff9900 1px solid
}
#ddimagetabs .current#sclink1 {
    BORDER-TOP: #ff9900 1px solid
}
#sc1 A:link {
    
}
#sc1 A:visited {
    
}
#sc1 A:hover {
    
}
#ddimagetabs #sclink2 {
    
}
#ddimagetabs #sclink2:hover {
    BORDER-TOP: #990099 1px solid
}
#ddimagetabs .current#sclink2 {
    BORDER-TOP: #990099 1px solid
}
#sc2 A:link {
    
}
#sc2 A:visited {
    
}
#sc2 A:hover {
    
}
#ddimagetabs #sclink3 {
    
}
#ddimagetabs #sclink3:hover {
    BORDER-TOP: #0099cc 1px solid
}
#ddimagetabs .current#sclink3 {
    BORDER-TOP: #0099cc 1px solid
}
#sc3 A:link {
    
}
#sc3 A:visited {
    
}
#sc3 A:hover {
    
}
#ddimagetabs #sclink4 {
    
}
#ddimagetabs #sclink4:hover {
    BORDER-TOP: #78ba00 1px solid
}
#ddimagetabs .current#sclink4 {
    BORDER-TOP: #78ba00 1px solid
}
#sc4 A:link {
    
}
#sc4 A:visited {
    
}
#sc4 A:hover {
    
}
#ddimagetabs #sclink5 {
    
}
#ddimagetabs #sclink5:hover {
    BORDER-TOP: #99cccc 1px solid
}
#ddimagetabs .current#sclink5 {
    BORDER-TOP: #99cccc 1px solid
}
#sc5 A:link {
    
}
#sc5 A:visited {
    
}
#sc5 A:hover {
    
}
#ddimagetabs #sclink6 {
    
}
#ddimagetabs #sclink6:hover {
    BORDER-TOP: #999999 1px solid
}
#ddimagetabs .current#sclink6 {
    BORDER-TOP: #999999 1px solid
}
#sc6 A:link {
    
}
#sc6 A:visited {
    
}
#sc6 A:hover {
    
}
#ddimagetabs #sclink7 {
    PADDING-RIGHT: 30px; BORDER-TOP: #ff0000 1px solid; PADDING-LEFT: 30px; BACKGROUND: #363636; MARGIN-LEFT: 100px; COLOR: #d7dcbe
}
#ddimagetabs #sclink7:hover {
    BORDER-TOP: #ef7777 1px solid; BACKGROUND: url(../images/cx_menu_hover_my.jpg) #cf1919 no-repeat center bottom
}
#ddimagetabs .current#sclink7 {
    BORDER-TOP: #ef7777 1px solid; BACKGROUND: url(../images/cx_menu_hover_my.jpg) #cf1919 no-repeat center bottom
}
#sc7 A:link {
    
}
#sc7 A:visited {
    
}
#sc7 A:hover {
    
}
#tabcontentcontainer {
    BACKGROUND: url(../images/sub_menu_bg.jpg) #fcfcfa repeat-x; WIDTH: 790px; HEIGHT: 27px
}
.tabcontent {
    DISPLAY: none; PADDING-TOP: 4px
}
.tabcontent A:link {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN-LEFT: 3px; CURSOR: pointer; LINE-HEIGHT: 18px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; TEXT-DECORATION: none
}
.tabcontent A:visited {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN-LEFT: 3px; CURSOR: pointer; LINE-HEIGHT: 18px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; HEIGHT: 18px; TEXT-DECORATION: none
}
.tabcontent A:hover {
    BACKGROUND: url(../images/cx_submenu_hover_grey.jpg) no-repeat center bottom; COLOR: #000000
}
#active_submenu {
    BACKGROUND: url(../images/cx_submenu_hover.jpg) #666666 no-repeat center bottom; COLOR: #fff
}