CSS英文提示的中文菜单，中英文双语菜单代码

发布时间：2018-08-13 16:31:39 所属栏目：创业来源：站长网

导读：一款你一定喜欢的CSS中英文双语菜单，支持鼠标 Tips特效，当我们把鼠标放到中文菜单上，会弹出Title的提示，先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ht

　　一款你一定喜欢的CSS中英文双语菜单，支持鼠标 Tips 特效，当我们把鼠标放到中文菜单上，会弹出Title的提示，先运行一下看效果，绝对会另你满意。用到了一个背景图片，请自行下载。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的中英文CSS菜单</title> <style> 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(/uploads/allimg/1102/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(/uploads/allimg/1102/navunbg.gif) no-repeat -8px 0} #nav li a:hover.two{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat -8px -60px} #nav li a:hover.three{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat -8px -120px} #nav li a:hover.four{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat -8px -180px} #nav li a:hover.five{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat 4px -240px} #nav li a:hover.six{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat 8px -300px} #nav li a:hover.seven{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat 4px -360px} #nav li a:hover.eight{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat -8px -420px} #nav li a:hover.nine{background:url(/uploads/allimg/1102/navunbg.gif) no-repeat 0 -480px} </style> </head> <body> <p> </p> <ul id="nav"> <li><a href="/" class="one">网站首页</a></li> <li><a href="/" class="two">关于我们</a></li> <li><a href="/" class="three">最新更新</a></li> <li><a href="/" class="four">更新排行</a></li> <li><a href="/" class="five">建站服务流程</a></li> <li><a href="/" class="six">烈火学院</a></li> <li><a href="/" class="seven">网站使用指南</a></li> <li><a href="/jscss/" class="eight">网页特效</a></li> <li><a href="/" class="nine">联系我们</a></li> </ul><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

穗港科研团队首建真正	邓丽君引爆虚拟人板块
比亚迪成立电池公司，	自称新势力2.0，电动屋