html制作中英文双语菜单,CSS实现的中英文双语菜单效果代码

本文实例讲述了CSS实现的中英文双语菜单效果代码。分享给大家供大家参考。具体如下：

这是一款你一定喜欢的CSS中英文双语菜单，支持鼠标 特效，先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

复制代码代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

实用的中英文CSS菜单

body{

margin:0;

padding:0;

font-size:12px;

}

*

{

margin:0;

padding:0;

text-align:left;

color:#9196A0;

font-family:Verdana;

}

a{

color:#9196A0;

}

a:link {

text-decoration: none

}

a:visited{

text-decoration: none

}

a:hover{

text-decoration:underline;

color:#81BC06

}

#nav{

height:100%;

overflow: hidden;

list-style:none;

margin:0 auto;

width:798px

}

#nav li{

float:left;

font-weight:bold;

height:60px;

background:url(images/navbg.png) #fff repeat-x left bottom;

padding:0

}

#nav a{

text-align:center;

padding-top:20px;

display: block;

height:40px;

line-height:40px;

}

#nav li a.one{width:80px;}

#nav li a.two{width:80px;}

#nav li a.three{width:80px;}

#nav li a.four{width:80px;}

#nav li a.five{width:100px;}

#nav li a.six{width:106px;}

#nav li a.seven{width:100px;}

#nav li a.eight{width:80px;}

#nav li a.nine{width:92px;}

#nav li a:hover.one{background:url(images/navunbg.gif) no-repeat -8px 0}

#nav li a:hover.two{background:url(images/navunbg.gif) no-repeat -8px -60px}

#nav li a:hover.three{background:url(images/navunbg.gif) no-repeat -8px -120px}

#nav li a:hover.four{background:url(images/navunbg.gif) no-repeat -8px -180px}

#nav li a:hover.five{background:url(images/navunbg.gif) no-repeat 4px -240px}

#nav li a:hover.six{background:url(images/navunbg.gif) no-repeat 8px -300px}

#nav li a:hover.seven{background:url(images/navunbg.gif) no-repeat 4px -360px}

#nav li a:hover.eight{background:url(images/navunbg.gif) no-repeat -8px -420px}

#nav li a:hover.nine{background:url(images/navunbg.gif) no-repeat 0 -480px}

• 网站首页
• 关于我们
• 最新更新
• 更新排行
• 建站服务流程
• 客户案例
• 网站使用指南
• 网页特效
• 联系我们

希望本文所述对大家的css网页设计有所帮助。