本文主要讲解CSS如何制作中英文双语菜单，这是一款你一定喜欢的CSS中英文双语菜单，支持鼠标 特效，先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。
代码如下:
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""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实现筛选菜单功能
用纯CSS实现筛选菜单功能
用纯CSS实现筛选菜单功能
以上就是详解CSS如何制作中英文双语菜单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2901307.html
