CSS横向下拉菜单代码,如何把下拉竖向改为横向菜单

    来源：站长啦　浏览：2235次　时间：2014-04-17


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" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<title>横向下拉菜单</title> 
<style type="text/css"> 
<!-- 
* {margin:0;padding:0;border:0;} 
body { 
font-family: arial, 宋体, serif; 
font-size:12px; 
} 
#nav { 
height: 24px;&#160; list-style-type: none;&#160; padding-left:200px; 
line-height:24px;overflow:hidden;background:#999; 
} 
#nav a { 
display: block; width: 80px; text-align:center; 
} 
#nav a:link&#160; { 
color:#EEE; text-decoration:none; 
} 
#nav a:visited&#160; { 
color:#EEE;text-decoration:none; 
} 
#nav a:hover&#160; { 
color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; 
} 
#nav li { 
float: left; width: 80px; 
} 
#nav li ul { 
line-height: 24px; 
list-style-type: none; 
text-align:left; 
left: -999px; 
width: 520px; //注意,这里一定要设置宽度; 
position: absolute; 
background:#CCC; 
} 
#nav li ul li{ 
float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float 
} 
#nav li ul a{ 
display: block; width: 65px;text-align:left;padding-left:15px; 
} 
#nav li ul a:link&#160; { 
color:#F1F1F1; text-decoration:none; 
} 
#nav li ul a:visited&#160; { 
color:#F1F1F1;text-decoration:none; 
} 
#nav li ul a:hover&#160; { 
color:#FFF;text-decoration:none;font-weight:normal;background:#C00; 
} 
#nav li:hover ul { 
left:25%; 
} 
#nav li.sfhover ul { 
left:25%; 
} 
#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="#">菜单一</a> 
<ul> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
<li><a href="#">菜单一</a></li> 
</ul> 
</li> 
<li><a href="#">菜单二</a> 
<ul> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
<li><a href="#">菜单二</a></li> 
</ul> 
</li> 
<li><a href="#">菜单三</a> 
<ul> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
<li><a href="#">菜单三</a></li> 
</ul> 
</li> 
<li><a href="#">菜单四</a> 
<ul> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
<li><a href="#">菜单四</a></li> 
</ul> 
</li> 
<li><a href="#">菜单五</a> 
<ul> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
<li><a href="#">菜单五</a></li> 
</ul> 
</li> 
<li><a href="#">菜单六</a> 
<ul> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
<li><a href="#">菜单六</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html>



这里贴出我修改的代码

#box_nav {
FLOAT: right; MARGIN-TOP: 25px; WIDTH: 612px
}
.menu {
FONT-SIZE: 14px; POSITION: relative; WIDTH: 100%
}
.menu UL {
LIST-STYLE-TYPE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
.menu UL LI {
CURSOR: pointer; BACKGROUND: url(../images/nav2.jpg) no-repeat 97px center; POSITION: relative; FLOAT: left; WIDTH: 102px; _position: static
}
.menu UL LI A {
HEIGHT: 38px; FLOAT: left; COLOR: #333; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 0px; TEXT-DECORATION: none; DISPLAY: block; LINE-HEIGHT: 20px; PADDING-RIGHT: 0px; WIDTH: 97px
}
.menu UL LI A:visited {
HEIGHT: 38px; FLOAT: left; COLOR: #333; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 6px; PADDING-LEFT: 0px; TEXT-DECORATION: none; DISPLAY: block; LINE-HEIGHT: 20px; PADDING-RIGHT: 0px; WIDTH: 97px
}
.menu UL LI A:hover {
COLOR: #003399
}
.menu UL LI.jgts {
BACKGROUND: none transparent scroll repeat 0% 0%
}
.menu UL LI A .ywzt {
FONT-SIZE: 12px; COLOR: #78650d; LINE-HEIGHT: 16px
}
.menu UL LI A:hover .ywzt {
COLOR: #fff
}
.menu UL LI:hover {

}
.menu UL LI:hover A {
COLOR: #003399
}
.menu UL LI:hover .ywzt {
COLOR: #003399
}
.menu UL LI UL {
DISPLAY: none ;z-index:999;
}
.menu UL LI:hover UL {
POSITION: absolute;
COLOR: #000000;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
PADDING-LEFT: 0px;
LEFT: 0px;
DISPLAY: block;
TOP: 23px;
PADDING-RIGHT: 0px;
float: left;width: 700px; 
}
.menu UL LI:hover UL LI A.hide {
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #000000
}
.menu UL LI:hover UL LI:hover A.hide {
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: #000000
}
.menu UL LI:hover UL LI {
float: left;width: 130px; 
}
.menu UL LI:hover UL LI A {
FONT-SIZE: 12px;
HEIGHT: 28px;
COLOR: #000000;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
PADDING-LEFT: 0px;
DISPLAY: block;
LINE-HEIGHT: 28px;
PADDING-RIGHT: 0px;
WIDTH: 97px
}
.menu UL LI:hover UL LI A:hover {
BACKGROUND: #fff;
COLOR: #0195d3;
float: left;
width: 102px;
}


<DIV id=top>
  <DIV class=clearboth></DIV></DIV>
<DIV class=top_bottom>
<DIV class=sydh>
<DIV id=logo><A href="{dede:global.cfg_basehost/}"><IMG style="MARGIN-RIGHT: 10px" 
align=absMiddle src="{dede:global.cfg_templets_skin/}/images/logo.jpg"></A> </DIV>
<DIV id=box_nav>
<DIV class=menu>
<UL>
  <LI><A class=hide 
  href="/a/about/Introduction/">五大配套<BR></A><!--[if lte IE 6]>
<a href="/a/about/introduction/"><span class="iejz">五大配套<br /></span>
<table><tr><td>
<![endif]--> 
  <UL>
    {dede:channel   type ='son' typeid ='1'   }
    <LI><A 
    href="[field:typelink/]">[field:typename/]</A> 
    </LI>
    {/dede:channel}
  </UL><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]--></LI>
  <LI><A class=hide 
  href="/a/Scope/weiyi/">市场概况<BR></A><!--[if lte IE 6]>
<a href="/a/Scope/weiyi/"><span class="scope">市场概况<br /></span>
<table><tr><td>
<![endif]--> 
  <UL>
     {dede:channel   type ='son' typeid ='7'   }
    <LI><A 
    href="[field:typelink/]">[field:typename/]</A> 
    </LI>
    {/dede:channel}
   </UL><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]--></LI>
 <LI><A class=hide 
  href="/a/news/gsnews/">招商细则<BR></A><!--[if lte IE 6]>
<a href="/a/news/gsnews/" ><span class="iejz">招商细则<br /></span></a>
<![endif]--></LI>
  <LI><A class=hide 
  href="/a/shebei/yetaifenbu/">业态分布<BR></A><!--[if lte IE 6]>
<a href="/a/shebei/yetaifenbu/"><span class="iejz">业态分布<br /></span></a>
<![endif]--></LI>
  <LI><A class=hide 
  href="/a/yinshua/changshi/">入驻企业<BR></A><!--[if lte IE 6]>
<a href="/a/yinshua/changshi/" ><span class="iejz">入驻企业<br /></span></a>
<![endif]--></LI>
  <LI><A class=hide 
 href="/a/lianxi/liuyan/">在线留言<BR></A><!--[if lte IE 6]>
<a href="/a/anli/anli1/" ><span class="iejz">在线留言<br /></span>
<table><tr><td>
<![endif]--> 
  <UL>
    {dede:channel   type ='son' typeid ='18'   }
    <LI><A 
    href="[field:typelink/]">[field:typename/]</A> 
    </LI>
    {/dede:channel}
    </UL><!--[if lte IE 6]>
</td></tr></table>
</a>


<![endif]--> </LI></UL></DIV></DIV><!--导航结束-->


上一篇： 淘宝服务电台：【桃漫画】品牌商品发布自检 功能重磅上线
下一篇： 淘宝服务电台：【新产品】手机受理交易问题不再难
当前位置：站长啦网站目录 » 站长资讯 » 站长新闻 » 技术文档 » 文章详细