横向弹出二级下拉菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】横向弹出二级下拉菜单
作者:Dezai.CN / 发布于2013/6/13/ 913

	<!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</a>" lang="zh-CN">
	 <head>
	 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	 <title>CSS菜单，横向弹出二级下拉菜单丨芯晴网页特效丨CsrCode.Cn</title>
	 <style type="text/css">
	 <!--
	 *{margin:0;padding:0;border:0;}
	 body {
	 font-family: arial, 宋体, serif;
	 font-size:12px;
	 }
	 #nav {
	 line-height: 24px; list-style-type: none; background:#666;
	 }
	 #nav a {
	 display: block; width: 80px; text-align:center;
	 }
	 #nav a:link {
	 color:#666; text-decoration:none;
	 }
	 #nav a:visited {
	 color:#666;text-decoration:none;
	 }
	 #nav a:hover {
	 color:#FFF;text-decoration:none;font-weight:bold;
	 }
	 #nav li {
	 float: left; width: 80px; background:#CCC;
	 }
	 #nav li a:hover{
	 background:#999;
	 }
	 #nav li ul {
	 line-height: 27px; list-style-type: none;text-align:left;
	 left: -999em; width: 980px; position: absolute; float:left;
	 }
	 #nav li ul li{
	 float: left; width: 80px;
	 background: #F6F6F6;
	 }
	 #nav li ul a{
	 display: block; width: 80px;text-align:center;
	 }
	 #nav li ul a:link {
	 color:#666; text-decoration:none;
	 }
	 #nav li ul a:visited {
	 color:#666;text-decoration:none;
	 }
	 #nav li ul a:hover {
	 color:#F3F3F3;text-decoration:none;font-weight:normal;
	 background:#C00;
	 }
	 #nav li:hover ul {
	 left: 0;
	 }
	 #nav li.sfhover ul {
	 left: 0;
	 }
	 #content {
	 clear: left;
	 }
	 -->
	 </style>
	 <script type=text/javascript><!--//--><![CDATA[//><!--
	 function menuFix() {
	 var sfEls = document.getElementById("nav").getElementsByTagName("li");
	 for (var i=0; i<sfEls.length; i++) {
	 sfEls[i].onmouseover=function() {
	 this.className+=(this.className.length>0? " ": "") + "sfhover";
	 }
	 sfEls[i].onMouseDown=function() {
	 this.className+=(this.className.length>0? " ": "") + "sfhover";
	 }
	 sfEls[i].onMouseUp=function() {
	 this.className+=(this.className.length>0? " ": "") + "sfhover";
	 }
	 sfEls[i].onmouseout=function() {
	 this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
	 "");
	 }
	 }
	 }
	 window.onload=menuFix;
	 //--><!]]></script>
	 </head>
	 <body>
	 <ul id="nav">
	 <li><a href="#">CsrCode.Cn</a>
	 <ul>
	 <li><a href="http://www.CsrCode.cn/">网页特效</a></li>
	 <li><a href="http://www.7caidy.com/">七彩影视</a></li>
	 <li><a href="http://www.33567.cn/">珊珊影视</a></li>
	 <li><a href="http://Changshi.CsrCode.Cn/">生活常识</a></li>
	 <li><a href="http://Links.CsrCode.Cn/">链接平台</a></li>
	 <li><a href="http://idc.csrcode.cn/">月付主机</a></li>
	 </ul>
	 </li>
	 <li><a href="#">网页特效①</a>
	 <ul>
	 <li><a href="http://www.CsrCode.cn/html/txdm/cddh/" title="">菜单导航特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/tcys/" title="">图层样式特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/ljwb/" title="">链接文本特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/txtx/" title="">图形图像特效</a></li>
	 </ul>
	 </li>
	 <li><a href="#">网页特效②</a>
	 <ul>
	 <li><a href="http://www.CsrCode.cn/html/txdm/sbtx/" title="">鼠标特效.代码</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/ymck/" title="">页面窗口特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/wybj/" title="">网页背景特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/rqsj/" title="">日期时间特效</a></li>
	 </ul>
	 </li>
	 <li><a href="#">网页特效③</a>
	 <ul>
	 <li><a href="http://www.CsrCode.cn/html/txdm/ymss/" title="">页面搜索特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/bgtx/" title="">表格表单特效</a></li>
	 <li><a href="http://www.CsrCode.cn/html/txdm/qtdm/" title="">其他网页特效</a></li>
	 </ul>
	 </li>
	 <li><a href="#">生活常识</a>
	 <ul>
	 <li><a href="http://changshi.csrcode.cn/html_cs/shenghuochangshi/">生活常识</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/jiankangzhishi/">健康知识</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/">美容瘦身</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/jianfeishoushen/">减肥瘦身</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/meironghufu/">美容护肤</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/yinshichangshi/">饮食常识</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/yangshengzhidao/">养生之道</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/diannaozhishi/">电脑知识</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/touzilicai/">投资理财</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/fushichangshi/">服饰常识</a></li>
	 <li><a href="http://changshi.csrcode.cn/html_cs/shejiaoliyi/">社交礼仪</a></li>
	 </ul>
	 </li>
	 <li><a href="#">友情链接</a>
	 <ul>
	 <li><a href="http://www.7caidy.com/">七彩影视</a></li>
	 <li><a href="http://www.33567.cn/">珊珊影视</a></li>
	 <li><a href="http://BBS.33567.cn/">外链论坛</a></li>
	 <li><a href="http://idc.csrcode.cn/">月付主机</a></li>
	 </ul>
	 </li>
	 </ul>
	 </body>
	 </html>
	  <hr>
试试其它关键字
　横向二级菜单　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)