你一定喜欢的CSS中英文双语菜单代码

2024-09-05 12:20:51

字体：大中小

来源：转载

供稿：网友

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

<!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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px 0}#nav li a:hover.two{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -60px}#nav li a:hover.three{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -120px}#nav li a:hover.four{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -180px}#nav li a:hover.five{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 4px -240px}#nav li a:hover.six{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 8px -300px}#nav li a:hover.seven{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 4px -360px}#nav li a:hover.eight{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -420px}#nav li a:hover.nine{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 0 -480px}</style></head><body><p> </p><ul id="nav"> <li>网站首页</li> <li>关于我们</li> <li>最新更新</li> <li>更新排行</li> <li>建站服务流程</li> <li>源码爱好者</li> <li>网站使用指南</li> <li>网页特效</li> <li>联系我们</li></ul>

上一篇：实用的二级导航，自定义方便

下一篇：CSS图标菜单,带有小图片的LI列表菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注