我整理好的一个常见的很有用的div+css功能模块源码,鼠标事件交换显示内容

<style type="text/css">
BODY { FONT-SIZE: 12px; BACKGROUND: #fff; COLOR: #000; TEXT-ALIGN: center; }
UL { PADDING:0px; MARGIN: 0px; }
LI { PADDING:0px; MARGIN: 0px; }
.area {      MARGIN: 0px auto; WIDTH: 404px; }
.main .navtitle LI { FLOAT: left; LIST-STYLE-TYPE: none; }
.main .navtitle LI a { WIDTH: 100px; FLOAT: left; TEXT-ALIGN: center;PADDING: 6px 0px 0px 0px; text-decoration:underline;text-decoration:none;color:#000000; }
.main .navtitle LI a:hover { color:#ff0000; }
.main .navtitle .line {      BACKGROUND: #b7c9d3; FLOAT: left; WIDTH: 1px; HEIGHT: 24px; }
.main .navtitle .underside_line { BORDER-bottom:1px solid #b7c9d3; FLOAT: left; WIDTH: 100px; HEIGHT: 24px; }
.main .navtitle .active_list { BORDER-TOP: #b7c9d3 1px solid; BACKGROUND: #fff; HEIGHT: 24px; }
.main .navtitle .active_list_none {      BORDER-TOP: #b7c9d3 1px solid; BACKGROUND: #efefef; BORDER-BOTTOM: #b7c9d3 1px solid; HEIGHT: 24px; }
.main .content { WIDTH: 100%; FLOAT: left; MARGIN: 0px 0px 8px;BORDER: 1px solid #b7c9d3;BORDER-top: 0px solid #b7c9d3; PADDING:12px 5px 5px 5px; HEIGHT: 200px; TEXT-ALIGN: left; }
</style>
<SCRIPT type=text/javascript>
function div_list(n) {
      var list_name="content"+n;
      var menu_name="menu"+n;
      div_list_no();
      document.getElementById(list_name).style.display="";
      document.getElementById(menu_name).className="active_list";
}
function div_list_no() {
      for (i=1; i<4; i++){
            var list_name="content"+i;
            var menu_name="menu"+i;
            document.getElementById(list_name).style.display="none";
            document.getElementById(menu_name).className="active_list_none";
      }
}
</SCRIPT>
<DIV class=area>
<DIV class=main id=menu>
<DIV class=navtitle id=newsNav>
<UL>
<LI class=line></LI>
<LI class=active_list id=menu1 onmouseover=div_list(1);> <a href="#">导航标题一</a> </LI>
<LI class=line></LI>
<LI class=active_list_none id=menu2 onmouseover=div_list(2);> <a href="#">导航标题二</a> </LI>
<LI class=line></LI>
<LI class=active_list_none id=menu3 onmouseover=div_list(3);> <a href="#">导航标题三</a> </LI>
<LI class=line></LI>
<LI class=underside_line></LI>
</UL>
</DIV>
<DIV class="content" id=content1 ><font color="red" size="4">在这里放置您导航标题一的详细内容</font> </DIV>
<DIV class="content" id=content2 style="DISPLAY: none"> <font color="blue" size="4">在这里放置您导航标题二的详细内容</font></DIV>
<DIV class="content" id=content3 style="DISPLAY: none"> <font color="green" size="4">在这里放置您导航标题三的详细内容</font></DIV>
</DIV>
</DIV>