1. 论坛系统升级为Xenforo，欢迎大家测试！
    排除公告

三个CSS实现的下拉菜单-要的进来拿

本帖由 流氓兔 于 2005-10-26 发布。版面名称：前端开发

  1. 流氓兔

    流氓兔 New Member

    注册:
    2005-09-27
    帖子:
    905
    赞:
    3
    ONE

    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Drop Down Menu </title>
<style type="text/css">
body {font-size:1%; color:#fff;} /*get rid of the IE bug that prints the the end of the !doctype */
.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
p { color:#000; font-size:16px;}
</style>

<!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/ 
.holder {display:none;}
.menu {display:block;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
   /*]]>*/
   </style>
<![endif]-->

</head>

<body>
<p>For another demo with page content see <a href="http://www.stunicholls.myby.co.uk/menus/drop_down.html" title="another demo">this page</a>

<div class="menu">
<a class="outer" href="page1.html">MENU 1
<table><tr><td>
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</td></tr></table>
</a>

<a class="outer" href="page1.html">MENU 2
<table><tr><td>
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</td></tr></table>
</a>
</div>

<div class="holder">
MENU 1<br />
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</div>
<div class="holder">
MENU 2<br />
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</div>
</body>
</html>

    TWO....................................

    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</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: 180px; position: absolute; 
}
#nav li ul li{
	float: left; width: 180px;
	background: #F6F6F6; 
}


#nav li ul a{
	display: block; width: 156px;text-align:left;padding-left:24px;
}

#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: auto;
}
#nav li.sfhover ul {
	left: auto;
}
#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>
	<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>
	</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="#">我们四111</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>
	<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>
	<li><a href="#">联系联系联系</a></li>
	<li><a href="#">联系联系联系</a></li>
	</ul>
</li>

</ul>

</body>
</html>
     
    #1 流氓兔, 2005-10-26
    最后编辑: 2005-10-26
  2. 流氓兔

    流氓兔 New Member

    注册:
    2005-09-27
    帖子:
    905
    赞:
    3
    Three.....................

    HTML:
    <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;  list-style-type: none;  padding-left:200px; 

line-height:24px;overflow:hidden;background:#999;
}

#nav a {
	display: block; width: 80px; text-align:center;
}

#nav a:link  {
	color:#EEE; text-decoration:none;
}
#nav a:visited  {
	color:#EEE;text-decoration:none;
}
#nav a:hover  {
	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  {
	color:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited  {
	color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover  {
	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>
     
    #2 流氓兔, 2005-10-26
  3. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    看到这个，想到在老论坛也不过几款。
     
    #3 不学无术, 2005-10-26
  4. fyfei

    fyfei New Member

    注册:
    2005-10-07
    帖子:
    9,067
    赞:
    46
    不错的说
     
    #4 fyfei, 2005-10-26
  5. 刘浏

    刘浏 New Member

    注册:
    2005-09-05
    帖子:
    340
    赞:
    5
    楼主好人
     
    #5 刘浏, 2005-10-26
  6. 刘浏

    刘浏 New Member

    注册:
    2005-09-05
    帖子:
    340
    赞:
    5
    第三个为什么没有效果呢
     
    #6 刘浏, 2005-10-26
  7. ztxby

    ztxby New Member

    注册:
    2005-10-14
    帖子:
    11
    赞:
    0
    试试看!
     
    #7 ztxby, 2005-10-26
  8. 西子宜

    西子宜 Well-Known Member

    注册:
    2005-09-05
    帖子:
    15,739
    赞:
    62
    第二个不错
     
    #8 西子宜, 2005-10-26
  9. 流氓兔

    流氓兔 New Member

    注册:
    2005-09-27
    帖子:
    905
    赞:
    3
    嘿嘿 我肯定是个好人
     
    #9 流氓兔, 2005-10-26
  10. jcking

    jcking Well-Known Member

    注册:
    2005-08-30
    帖子:
    22,282
    赞:
    70
    是的似的,
     
    #10 jcking, 2005-10-30
(您必须注册并登陆后发新主题。)
Toggle Width
语言
简体中文