代码:
-----------------------
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< meta http-equiv ="content-type" content ="application/xhtml+xml; charset=gb2312" />
< title > css+js导航菜单 </ title >
< style type ="text/css" >
<!--
* { margin : 0 ; padding : 0 ; }
img { border : 0 ; }
body { font : 12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体 ; } li { list-style : none ; }
.clearfix:after { content : "  ; ";display : block ; height : 0 ; clear : both ; visibility : hidden ; } .clearfix { display : inline-block ; }
a:link { color : #000 ; text-decoration : none ; }
a:visited { color : #000 ; text-decoration : none ; }
a:hover { color : #000 ; text-decoration : none ; }
.menu { height : 59px ; background : #474747 url(http://www.codefans.net/jscss/demoimg/200905/sub_menu_bg.jpg) 0 34px repeat-x ; width : 969px ; }
.menu ul { margin : 0 ; padding : 0 ; }
.menu ul li { float : left ; height : 33px ; position : relative ; }
.menu ul li a { cursor : pointer ; border-top : #666 1px solid ; padding : 0 20px ; float : left ; color : #989898 ; line-height : 33px ; margin-right : 2px ; height : 33px ; text-align : center ; background : #363636 ; }
.menu ul li a:link { color : #989898 ; text-decoration : none ; }
.menu ul li a:visited { color : #989898 ; text-decoration : none ; }
.menu ul li a:hover { color : #fff ; border-top : #999 1px solid ; background : #363636 url(http://www.codefans.net/jscss/demoimg/200905/cx_menu_hover.jpg) center bottom no-repeat ; }
.menu ul li div { position : absolute ; width : 600px ; left : 10px ; ; top : 34px ; height : 25px ; display : none ; }
.menu ul li div a { float : none ; display : inline ; padding : 0 10px ; margin-right : 8px ; background : none ; border : none ; line-height : 24px ; }
.menu ul li div a:link,.menu ul li div a:visited { color : #444 ; }
.menu ul li div a:hover { background : none ; border : none ; color : #000 ; text-decoration : underline ; }
.menu ul .block div { display : block ; }
.menu a:hover.mbtn1,.menu .mbtn1ok,.menu mbtn1 { border-top : #ff8c00 1px solid ; }
.menu a:hover.mbtn2,.menu .mbtn2 { border-top : #c71585 1px solid ; }
.menu a:hover.mbtn3,.menu .mbtn3 { border-top : #66cdaa 1px solid ; }
.menu a:hover.mbtn4,.menu .mbtn4 { border-top : #9acd32 1px solid ; }
.menu a:hover.mbtn5,.menu .mbtn5 { border-top : #1e90ff 1px solid ; }
-->
</ style >
</ head >
< body >
< div id ="menu" class ="menu" >
< ul >
< li >< a id ="mbtn1" class ="mbtn1ok" href ="http://www.codefans.net/" > 首 页 </ a ></ li >
< li >< a id ="mbtn2" href ="" > 源码下载 </ a >
< div >< a href ="/other/lastupdate.shtml" > 最新更新 </ a > < a href ="/other/top100.shtml" > 下载排行 </ a > < a href ="/sort/index.shtml" > 源码分类 </ a ></ div >
</ li >
< li >< a id ="mbtn3" href ="" > ASP </ a >
< div >< a href ="/sort/list_1_87_1.shtml" > AJAX </ a > < a href ="/sort/list_1_11_1.shtml" > 聊天留言 </ a > < a href ="/sort/list_1_29_1.shtml" > CMS系统 </ a ></ div >
</ li >
< li >< a id ="mbtn4" href ="" > PHP </ a >
< div >< a href ="/sort/list_2_35_1.shtml" > 企业建站 </ a > < a href ="/sort/list_2_185_1.shtml" > AJAX相关 </ a ></ div >
</ li >
< li >< a id ="mbtn5" href ="" > 电子书籍 </ a >
< div >< a href ="" > ASP书籍 </ a > < a href ="" > PHP书籍 </ a > < a href ="" > AJAX书籍 </ a ></ div >
</ li >
< li >< a href ="/jscss/" > 网页特效 </ a ></ li >
< li >< a href ="/service/ad.shtml" > 广告服务 </ a ></ li >
< li >< a href ="/guestbook/" > 网站留言 </ a ></ li >
< li >< a href ="/service/links.shtml" > 友情链接 </ a ></ li >
< li >< a href ="/sort/list_6_1.shtml" > 工具软件 </ a ></ li >
< li >< a href ="" > English </ a ></ li >
</ ul >
</ div >
< script type ="text/javascript" >
var menu = document.getElementById( " menu " );
var lis = menu.getElementsByTagName( " li " );
var las = menu.getElementsByTagName( " a " );
for ( var i = 0 ; i < 6 ; i ++ )
{
lis[i].num = i;
lis[i].onmouseover = show;
}
function show()
{
var lias = lis[ this .num].getElementsByTagName( " a " );
for ( var i = 0 ; i < lis.length; i ++ )
{
lis[i].className = ""
}
for ( var i = 0 ; i < las.length; i ++ )
{
las[i].className = ""
}
lis[ this .num].className = " block " ;
lias[ 0 ].className = lias[ 0 ].id
}
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< meta http-equiv ="content-type" content ="application/xhtml+xml; charset=gb2312" />
< title > css+js导航菜单 </ title >
< style type ="text/css" >
<!--
* { margin : 0 ; padding : 0 ; }
img { border : 0 ; }
body { font : 12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体 ; } li { list-style : none ; }
.clearfix:after { content : "  ; ";display : block ; height : 0 ; clear : both ; visibility : hidden ; } .clearfix { display : inline-block ; }
a:link { color : #000 ; text-decoration : none ; }
a:visited { color : #000 ; text-decoration : none ; }
a:hover { color : #000 ; text-decoration : none ; }
.menu { height : 59px ; background : #474747 url(http://www.codefans.net/jscss/demoimg/200905/sub_menu_bg.jpg) 0 34px repeat-x ; width : 969px ; }
.menu ul { margin : 0 ; padding : 0 ; }
.menu ul li { float : left ; height : 33px ; position : relative ; }
.menu ul li a { cursor : pointer ; border-top : #666 1px solid ; padding : 0 20px ; float : left ; color : #989898 ; line-height : 33px ; margin-right : 2px ; height : 33px ; text-align : center ; background : #363636 ; }
.menu ul li a:link { color : #989898 ; text-decoration : none ; }
.menu ul li a:visited { color : #989898 ; text-decoration : none ; }
.menu ul li a:hover { color : #fff ; border-top : #999 1px solid ; background : #363636 url(http://www.codefans.net/jscss/demoimg/200905/cx_menu_hover.jpg) center bottom no-repeat ; }
.menu ul li div { position : absolute ; width : 600px ; left : 10px ; ; top : 34px ; height : 25px ; display : none ; }
.menu ul li div a { float : none ; display : inline ; padding : 0 10px ; margin-right : 8px ; background : none ; border : none ; line-height : 24px ; }
.menu ul li div a:link,.menu ul li div a:visited { color : #444 ; }
.menu ul li div a:hover { background : none ; border : none ; color : #000 ; text-decoration : underline ; }
.menu ul .block div { display : block ; }
.menu a:hover.mbtn1,.menu .mbtn1ok,.menu mbtn1 { border-top : #ff8c00 1px solid ; }
.menu a:hover.mbtn2,.menu .mbtn2 { border-top : #c71585 1px solid ; }
.menu a:hover.mbtn3,.menu .mbtn3 { border-top : #66cdaa 1px solid ; }
.menu a:hover.mbtn4,.menu .mbtn4 { border-top : #9acd32 1px solid ; }
.menu a:hover.mbtn5,.menu .mbtn5 { border-top : #1e90ff 1px solid ; }
-->
</ style >
</ head >
< body >
< div id ="menu" class ="menu" >
< ul >
< li >< a id ="mbtn1" class ="mbtn1ok" href ="http://www.codefans.net/" > 首 页 </ a ></ li >
< li >< a id ="mbtn2" href ="" > 源码下载 </ a >
< div >< a href ="/other/lastupdate.shtml" > 最新更新 </ a > < a href ="/other/top100.shtml" > 下载排行 </ a > < a href ="/sort/index.shtml" > 源码分类 </ a ></ div >
</ li >
< li >< a id ="mbtn3" href ="" > ASP </ a >
< div >< a href ="/sort/list_1_87_1.shtml" > AJAX </ a > < a href ="/sort/list_1_11_1.shtml" > 聊天留言 </ a > < a href ="/sort/list_1_29_1.shtml" > CMS系统 </ a ></ div >
</ li >
< li >< a id ="mbtn4" href ="" > PHP </ a >
< div >< a href ="/sort/list_2_35_1.shtml" > 企业建站 </ a > < a href ="/sort/list_2_185_1.shtml" > AJAX相关 </ a ></ div >
</ li >
< li >< a id ="mbtn5" href ="" > 电子书籍 </ a >
< div >< a href ="" > ASP书籍 </ a > < a href ="" > PHP书籍 </ a > < a href ="" > AJAX书籍 </ a ></ div >
</ li >
< li >< a href ="/jscss/" > 网页特效 </ a ></ li >
< li >< a href ="/service/ad.shtml" > 广告服务 </ a ></ li >
< li >< a href ="/guestbook/" > 网站留言 </ a ></ li >
< li >< a href ="/service/links.shtml" > 友情链接 </ a ></ li >
< li >< a href ="/sort/list_6_1.shtml" > 工具软件 </ a ></ li >
< li >< a href ="" > English </ a ></ li >
</ ul >
</ div >
< script type ="text/javascript" >
var menu = document.getElementById( " menu " );
var lis = menu.getElementsByTagName( " li " );
var las = menu.getElementsByTagName( " a " );
for ( var i = 0 ; i < 6 ; i ++ )
{
lis[i].num = i;
lis[i].onmouseover = show;
}
function show()
{
var lias = lis[ this .num].getElementsByTagName( " a " );
for ( var i = 0 ; i < lis.length; i ++ )
{
lis[i].className = ""
}
for ( var i = 0 ; i < las.length; i ++ )
{
las[i].className = ""
}
lis[ this .num].className = " block " ;
lias[ 0 ].className = lias[ 0 ].id
}
</ script >
</ body >
</ html >