绝对酷的黑色风格二级导航菜单

 

代码:

-----------------------

 

<! 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 : "&nbsp ; ";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 >< id ="mbtn1"  class ="mbtn1ok"  href ="http://www.codefans.net/" > 首 页 </ a ></ li >
< li >< id ="mbtn2"  href ="" > 源码下载 </ a >
< div >< href ="/other/lastupdate.shtml" > 最新更新 </ a >   < href ="/other/top100.shtml" > 下载排行 </ a >   < href ="/sort/index.shtml" > 源码分类 </ a ></ div >
</ li >
< li >< id ="mbtn3"  href ="" > ASP </ a >
< div >< href ="/sort/list_1_87_1.shtml" > AJAX </ a >   < href ="/sort/list_1_11_1.shtml" > 聊天留言 </ a >   < href ="/sort/list_1_29_1.shtml" > CMS系统 </ a ></ div >
</ li >
< li >< id ="mbtn4"  href ="" > PHP </ a >
< div >< href ="/sort/list_2_35_1.shtml" > 企业建站 </ a >   < href ="/sort/list_2_185_1.shtml" > AJAX相关 </ a ></ div >
</ li >
< li >< id ="mbtn5"  href ="" > 电子书籍 </ a >
< div >< href ="" > ASP书籍 </ a >   < href ="" > PHP书籍 </ a >   < href ="" > AJAX书籍 </ a ></ div >
</ li >
< li >< href ="/jscss/" > 网页特效 </ a ></ li >
< li >< href ="/service/ad.shtml" > 广告服务 </ a ></ li >
< li >< href ="/guestbook/" > 网站留言 </ a ></ li >
< li >< href ="/service/links.shtml" > 友情链接 </ a ></ li >
< li >< href ="/sort/list_6_1.shtml" > 工具软件 </ a ></ li >
< li >< 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 >
posted on 2011-07-19 13:18  前端设计 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110463.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值