蛙蛙推荐：微软MSDN导航菜单演示（Javascript+CSS2）

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 微软MSDN导航菜单 </ title >
< style  type ="text/css" >
<!--
/**//*有些样式是可以继承的,外层定义过的效果,内层元素默认会自动继承,而且还要搞清楚CSS样式的优先级*/
/**//*文档边距为0*/
BODY {}{
    MARGIN: 0px
}
/**//*整个导航栏被包含在一个DIV标签里,这是这个DIV的样式,这里只设置了上下边框,而没有设置左右边框*/
#msviLocalToolbar {}{
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 1px;
    PADDING-TOP: 2px;    /**//*设置上下左右的填充*/
    BORDER-TOP: #999 1px solid; 
    BORDER-BOTTOM: #999 1px solid; /**//*设置上下边框的颜色,宽度和样式*/
    FONT-SIZE: 100%; /**//*字体大小100%*/
    BACKGROUND: #f1f1f1; /**//*背景颜色为#f1f1f1*/
}
/**//*导航栏里包含的TD标签的样式,这里只设置了字体尺寸*/
#msviLocalToolbar TD {}{
    FONT-SIZE: 100%
}
/**//*导航栏里包含的A标签的样式,这里设置了A元素的样式,就是所有msviLocalToolbar里包含的A元素都默认继承的.*/
#msviLocalToolbar A {}{
    FONT: 70% Verdana; /**//*链接文字尺寸和字体*/
    COLOR: black; /**//*链接颜色*/
    TEXT-DECORATION: none /**//*设置链接没有下划线,没有任何样式*/
}
/**//*导航主标题样式,这里设置了宽,这个样式会用在一个单元格里*/
#msviHomePageLink {}{
    
    PADDING-LEFT: 2px;/**//*左边补丁边距为2象素*/
    WIDTH: 177px; /**//*宽177象素*/
}
/**//*导航主标题里的单元格样式*/
#msviHomePageLink TD {}{    
    FONT-SIZE: 100%;/**//*字符尺寸为100%*/
}
/**//*导航主标题里的A标签样式*/
#msviHomePageLink A {}{
    BACKGROUND: #f1f1f1; /**//*背景色为#f1f1f1*/
    MARGIN: 0px; /**//*四边的外延边距都设置成0象素*/
    WHITE-SPACE: nowrap;    /**//*强制在同一行内显示所有文本，直到文本结束或者遭遇br对象*/
    DISPLAY: block; /**//*链接正常显示,并在链接后添加新行*/
    PADDING-LEFT: 6px; /**//*左边补丁为6象素*/ 
    PADDING-RIGHT: 6px; /**//*右边补丁为6象素*/ 
    PADDING-TOP: 2px; /**//*上边补丁为2象素*/ 
    PADDING-BOTTOM: 2px; /**//*下边补丁为2象素*/ 
    BORDER-LEFT: #f1f1f1 1px solid; /**//*左边框为1象素#f1f1f1颜色实线*/
    BORDER-TOP: #f1f1f1 1px solid; /**//*上边框为1象素#f1f1f1颜色实线*/
    BORDER-RIGHT: #f1f1f1 1px solid; /**//*右边框为1象素#f1f1f1颜色实线*/
    BORDER-BOTTOM: #f1f1f1 1px solid; /**//*下边框为1象素#f1f1f1颜色实线*/
}
/**//*导航主题里当鼠标放在链接上时的样式,这时候链接的边框颜色和背景颜色都变了,所以当鼠标划过链接时链接会有所变化,上面注释过的CSS属性我下面就不注释了.*/
#msviHomePageLink A:hover {}{
    MARGIN: 0px;
    DISPLAY: block;
    BACKGROUND: #ccc;
    PADDING-TOP: 2px;     
    PADDING-BOTTOM: 2px;
    PADDING-LEFT: 6px;
    PADDING-RIGHT: 6px;
    BORDER-LEFT: #999 1px solid;
    BORDER-TOP: #999 1px solid;
    BORDER-RIGHT: #999 1px solid;
    BORDER-BOTTOM: #999 1px solid;
}
/**//*这个样式用在a元素上,当鼠标在链接上离开时使用这个样式,不过.lt0和.lt1这两个样式是通过一个js函数来切换的*/
.lt0 {}{
    BORDER-RIGHT: #f1f1f1 1px solid;
    PADDING-RIGHT: 6px;
    BORDER-TOP: #f1f1f1 1px solid;
    PADDING-LEFT: 6px;
    BACKGROUND: #f1f1f1; 
    PADDING-BOTTOM: 0px; 
    BORDER-LEFT: #f1f1f1 1px solid; 
    PADDING-TOP: 0px; 
    BORDER-BOTTOM: #f1f1f1 1px solid
}
/**//*这个是定义当鼠标放在链接上时使用的样式*/
.lt1 {}{
    BORDER-RIGHT: #999 1px solid;
    PADDING-RIGHT: 6px; 
    BORDER-TOP: #999 1px solid; 
    PADDING-LEFT: 6px; 
    BACKGROUND: #ccc; 
    PADDING-BOTTOM: 0px; 
    BORDER-LEFT: #999 1px solid; 
    PADDING-TOP: 0px; 
    BORDER-BOTTOM: #999 1px solid
}
/**//*单元格之间间隔的样式,用在一个小竖线上*/
.ltsep {}{
    PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px; FONT: 70% Verdana; COLOR: #a9a9a9; PADDING-TOP: 0px
}
-->
</ style >
< script  language ="JavaScript"  type ="text/JavaScript" >
//替换某个容器里指定元素的样式
function mhHover(tbl,idx,cls)
{
    var t,d; //定义两个变量
    //设置变量t为tb1的引用,不过if语句里那句我不知道有什么用,我记得getElementById函数需要参数的.
    //可能是测试浏览器特性的,根据浏览器特性来保证能正确获取tb1的引用
    if(document.getElementById)t=document.getElementById(tbl);
    else t=document.all(tbl);
    if(t==null)return;
    //设置d为tb1容器里的所有TD元素集合
    if(t.getElementsByTagName)d=t.getElementsByTagName("TD");
    else d=t.all.tags("TD");
    if(d==null)return;
    //判断获取TD元素集合的长度是否比idx还小,因为要设置下标为idx的元素的样式,所以必须要加这个判断
    if(d.length<=idx)return;
    //设置td集合里的第idx-1个元素的样式为cls,因为没两个内容单元格之间有个间隔单元格,所以调用该函数的时候要搞清楚到底要设置第几个单元格的样式.
    d[idx].className=cls;
}
</ script >

</ head >
< body >
< DIV  id =msviLocalToolbar >
< TABLE  height =19  cellSpacing =0  cellPadding =0  width ="100%"  border =0 >
   < TBODY >
   < TR >
     < TD  id =msviHomePageLink  noWrap >
         < A  href ="http://www.microsoft.com/china/msdn/default.aspx"   > MSDN 主页 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 2, 'lt1')"     
    onmouseout ="mhHover('msviLocalToolbar', 2, 'lt0')"  noWrap >
         < A  href ="http://www.microsoft.com/china/msdn/DeveloperCenter/default.mspx" > 开发中心 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 4, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 4, 'lt0')"  noWrap >
         < A  href ="http://www.microsoft.com/china/msdn/library/default.mspx" > 技术资源库 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 6, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 6, 'lt0')"  noWrap >
         < A  href ="http://www.microsoft.com/china/msdn/events/default.mspx" > 活动与培训 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 8, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 8, 'lt0')"  noWrap >
         < A  href ="http://www.microsoft.com/china/msdn/download/default.mspx" > 下载中心 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 10, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 10, 'lt0')"  noWrap >
         < A  href ="http://www.microsoft.com/china/community/developer/default.mspx" > 开发者社区 </ A >
     </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 12, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 12, 'lt0')"  noWrap >
         < A   href ="http://www.microsoft.com/downloads/search.aspx?displaylang=zh-cn&amp;categoryid=10" > 在线资源 </ A >
         </ TD >
     < TD >
         < SPAN  class =ltsep > | </ SPAN >
     </ TD >
     < TD  class =lt0  onmouseover ="mhHover('msviLocalToolbar', 14, 'lt1')"  
    onmouseout ="mhHover('msviLocalToolbar', 14, 'lt0')"  noWrap >
         < A  href ="http://msdn.microsoft.com/worldwide.aspx"   > MSDN 全球站点 </ A >
     </ TD >
     < TD  width ="100%" ></ TD >
     </ TR >
     </ TBODY >
     </ TABLE >
     </ DIV >
</ body >
</ html >

不了解CSS和HTML里的边框，不定，宽度，填充的概念的可以参考下面的图