打印

[教程] CSS菜单－下拉菜单效果

leaon

中级会员

帖子: 192
体力: 251
威望: 4
当前: 上海长宁
离线: 3 天

31^# 大中小发表于 2007-1-19 17:04

可以参考下《网站布局实录》里面的那个例子，里面的方法要比楼主的巧妙点，不用onMouseOver鼠标事件，代码也简洁点，呵呵，支持下楼主！

TOP

yadan

初级会员

帖子: 81
体力: 157
威望: 0

发短消息

32^# 大中小发表于 2007-1-22 09:16

没找到相关资料，请大虾指点一二，多谢。。。

我是人

TOP

yadan

初级会员

帖子: 81
体力: 157
威望: 0

发短消息

33^# 大中小发表于 2007-1-23 09:06

老大们，真的无救了吗？
楼主，您在不。。。

我是人

TOP

yadan

初级会员

帖子: 81
体力: 157
威望: 0

发短消息

34^# 大中小发表于 2007-1-24 10:12

走投无路，只好放弃。。。

我是人

TOP

tdlisheng [楼主]

中级会员

帖子: 122
体力: 284
威望: 2
离线: 27 天

35^# 大中小发表于 2007-2-8 18:15

<!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="gb2312" xml:lang="gb2312">
<head>
<title>站酷CSS代码演示-http://www.zcool.com.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<div id="nav">
	<ul>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">站酷首页	
	<div class="list">
		<a href="#">我的Png</a><br />
        <a href="#">我的Gif</a><br />
        <a href="#">我的酷站</a><br />
		<a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信	
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理	
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
		<a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

huanglin743

新手上路

帖子: 2
体力: 9
威望: 0
离线: 477 天

发短消息

36^# 大中小发表于 2007-3-15 09:57

不行啊

楼主

TOP

anyforever

新手上路

帖子: 34
体力: 0
威望: 0
当前: 天津南开
离线: 41 天

37^# 大中小发表于 2007-3-15 10:07

这个真不错。收了。

TOP

shaoqiancamel

初级会员

帖子: 32
体力: 71
威望: 0
离线: 31 天

发短消息

38^# 大中小发表于 2007-3-15 11:45

提示：您可以先修改部分代码再运行

我目前使用的菜单，用一个国外菜单修改的，用JS控制，效果不错

TOP

houjie828

野草翁
银牌会员

帖子: 508
体力: 1111
威望: 0
当前: 江苏常州
离线: 12 天

专长 网页设计,ASP,Access

39^# 大中小发表于 2007-6-4 13:59

timeout is not defined，是什么错误

以上的在有错误说：
错误： timeout is not defined
源文件：
行：216

能有人把修正一下吗？

个人博客

TOP

Askyboy

下一站
高级会员

帖子: 259
体力: 536
威望: 1

40^# 大中小发表于 2007-6-5 10:53

#

模仿做了一个,无法将菜单下面的东西保持在原位置,菜单显示就会把下面的内容挤下去,不会用相对和绝对定位,请各位朋友一直讨论讨论.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank"><http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS菜单－－下拉菜单</title>
<style>
/*Author:5key.net*/
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul{margin:0; padding:0}
ul li{float:left;display:inline;}
ul li div{display:none}
.menu2{border:1px solid #ccc;background:#f3f3f3; margin:0 5px 0 5px; height:20px; line-height:20px; overflow-y:hidden;color:#666; width:100px; text-align:center; font-weight:bold}
.menu1{border:1px solid #A0C229 ;background:#E5ECC9; margin:0 5px 0 5px; height:auto; line-height:20px; overflow:hidden;color:#666; width:100px; text-align:center}
.menu1 div{display:block}
#list{margin:0; line-height:20px}
#list a{ display:block;width:86px; height:20px;text-align:center; margin:0; padding:0; text-decoration:none; text-align:left; color:green; padding-left:10px;}
#list a:link{}
#list a:hover{background:#86BA67;color:#fff; text-decoration:none; margin:2px;}
#menu{margin:0; padding:0; width:100%}
#menu nav ul{position:relative;}
#menu nav ul li{ position:absolute; left:0; right:0; z-index:100}
</style>
</head>
<body>
<div id="menu">
<div id="nav">
	<ul>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页	
	<div id="list">
		<a href="#">我的CHINAY</a>
        <a href="#">我的首页</a>
        <a href="#">我的日志</a>
		<a href="#">我的日志</a>
        <a href="#">我的相册</a>
        <a href="#">我的收藏</a>
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
	<div id="list">
		<a href="#">我的CHINAY</a>
        <a href="#">我的首页</a>
        <a href="#">我的日志</a>
        <a href="#">我的相册</a>
        <a href="#">我的收藏</a>
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信	
	<div id="list">
		<a href="#">我的CHINAY</a>
        <a href="#">我的相册</a>
        <a href="#">我的收藏</a>
	</div>
	</li>
	<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理	
	<div id="list">
		<a href="#">我的CHINAY</a>
        <a href="#">我的首页</a>
        <a href="#">我的日志</a>
        <a href="#">我的相册</a>
        <a href="#">我的收藏</a>
		<a href="#">我的日志</a>
        <a href="#">我的相册</a>
        <a href="#">我的收藏</a>
	</div>
	</li>
	</ul>
</div>
</div>
<div style="color:#000000">hjghjhgjhgjfghjghjhgfjhgjhgfjhgfjhgfjg</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

vipbaidu

高级会员

帖子: 263
体力: 511
威望: 0
离线: 148 天

发短消息

41^# 大中小发表于 2007-6-5 13:07

还不错!

网站建设

TOP

qingerwusan

新手上路

帖子: 8
体力: 21
威望: 0
离线: 415 天

发短消息

42^# 大中小发表于 2007-6-5 16:15

层的嵌套，再就是浮动就可以

TOP

qingerwusan

新手上路

帖子: 8
体力: 21
威望: 0
离线: 415 天

发短消息

43^# 大中小发表于 2007-6-5 16:17

Askyboy
学习

TOP

Deno

sundown
中级会员

帖子: 138
体力: 289
威望: 0
离线: 305 天

发短消息

44^# 大中小发表于 2007-6-6 11:24

楼主的东西很好`` 可是我把CSS部分定义在CSS文件里``而不是<head>里``怎么显示的时候下拉菜单就没了呢``` 郁闷`

TOP

Askyboy

下一站
高级会员

帖子: 259
体力: 536
威望: 1

45^# 大中小发表于 2007-6-6 11:37

引用:

原帖由 qingerwusan 于 2007-6-5 16:17 发表
Askyboy
学习

啥意思?
我正好好学习哦

TOP

falsh61

蓝色发啦斯六一
高级会员

帖子: 419
体力: 949
威望: 0
离线: 171 天

发短消息

46^# 大中小发表于 2007-8-17 11:57

能不能做成三级四级的呀，我想要一个

大连

TOP

Flyinghigher

个性猪
高级会员

帖子: 446
体力: 582
威望: 0
当前: 广东深圳
离线: 15 天

47^# 大中小发表于 2007-8-17 12:26

下面的不动...

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS菜单－－下拉菜单</title>
<style type="text/css">
/*Author:5key.net*/
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
z-index:10;
position:absolute;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
z-index:10;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
.aaa { border:1px red solid; background:#9cf; width:500px; height:40px; position:absolute; top:50px;}
.nnav{position:relative;}
</style>
</head>
<body>
<div class="nnav">
<div id="nav">
	<ul>
	<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">我的首页	
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
		<a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">社区圈子
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">我的短信	
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	<li class="menu2" onmouseover="this.className='menu1'" onmouseout="this.className='menu2'">账户管理	
	<div class="list">
		<a href="#">我的CHINAY</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
		<a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
	</div>
	</li>
	</ul>
</div>
<div class="aaa">asdfasd </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

电玩门户、商城

TOP

hnlzy188

子夜听雨声
银牌会员

帖子: 826
体力: 1261
威望: 1
当前: 云南昆明
离线: 2 天

专长 网页设计,前端制作,ASP

48^# 大中小发表于 2007-8-17 12:48

很好的帖子,不错,收藏了

中国专业另类图片站：www.yutow.com

TOP

ipoping

新手上路

帖子: 25
体力: 31
威望: 0
当前: 上海徐汇
离线: 1 天

发短消息

49^# 大中小发表于 2007-8-17 13:33

顶顶! 研究下!

TOP

chenjing325

新手上路

帖子: 1
体力: 7
威望: 0
当前: 广东中山
离线: 86 天

发短消息

50^# 大中小发表于 2008-4-30 08:23

我是新来的，看到这么多经典的代码，很高兴
谢谢大家分享

TOP

ystar

中级会员

帖子: 145
体力: 249
威望: 0
当前: 浙江杭州
离线: 4 天

专长 前端制作,SEO

51^# 大中小发表于 2008-4-30 09:52

这么老的贴子都被你顶出来了,你还真牛啊.

www.chuxuezhe.net

TOP

kanghuanan

初级会员

帖子: 72
体力: 76
威望: 0
当前: 北京东城区
离线: 1 天

发短消息

52^# 大中小发表于 2008-4-30 13:41

还是用绝对路径解决的！～

TOP

Elking

中级会员

帖子: 140
体力: 279
威望: 0

发短消息

53^# 大中小发表于 2008-5-1 17:50

这贴旧得实在太NB了 .....不过思路却是很强!没了CSS得情况下结构也不错...只是<br /> 感觉不怎么好

TOP

173457117

初级会员

帖子: 81
体力: 180
威望: 0
当前: 重庆沙坪坝
离线: 1 天

发短消息

54^# 大中小发表于 2008-5-3 20:35

楼主  我把你的<br  />用把<a>变成块状代替  onmouseover放到CSS里头了  但是。。。运行起来CPU到了100%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS菜单－－下拉菜单</title>
<style>
/*Author:5key.net*/
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-positionutside;
text-align:center;
font-weight:bold;
float:left;
}
a:link,a:visited{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}

a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#000000;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);

}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
a{display:block;}
li{event:expression(
onmouseover = function(){
this.className='menu1'
},
onmouseout = function(){
this.className='menu2'
}
)

</style>
</head>
<body>
<div id="nav">
   <ul>
   <li class="menu2" >我的首页
   <div class="list">
            <a href="#">我的CHINAY</a>
      <a href="#">我的首页</a>
      <a href="#">我的日志</a>
            <a href="#">我的日志</a>
      <a href="#">我的相册</a>
      <a href="#">我的收藏</a>
   </div>
   </li>
   <li class="menu2">社区圈子
   <div class="list">
            <a href="#">我的CHINAY</a>
      <a href="#">我的首页</a>
      <a href="#">我的日志</a>
      <a href="#">我的相册</a>
      <a href="#">我的收藏</a>
   </div>
   </li>
   <li class="menu2">我的短信
   <div class="list">
            <a href="#">我的CHINAY</a>
      <a href="#">我的相册</a>
      <a href="#">我的收藏</a>
   </div>
   </li>
   <li class="menu2">账户管理
   <div class="list">
            <a href="#">我的CHINAY</a>
      <a href="#">我的首页</a>
      <a href="#">我的日志</a>
      <a href="#">我的相册</a>
      <a href="#">我的收藏</a>
            <a href="#">我的日志</a>
      <a href="#">我的相册</a>
      <a href="#">我的收藏</a>
   </div>
   </li>
   </ul>
</div>
</body>
</html>

[ 本帖最后由 173457117 于 2008-5-3 20:43 编辑 ]

TOP

haohaohb

新手上路

帖子: 11
体力: 28
威望: 0
当前: 湖北荆门
离线: 58 天

发短消息

55^# 大中小发表于 2008-5-4 15:07

好东西啊！！收藏了！

TOP

taiyangcn

新手上路

帖子: 16
体力: 29
威望: 0
离线: 48 天

发短消息

56^# 大中小发表于 2008-5-11 21:11

谢谢楼主了

TOP

anquan1

禁止发言

帖子: 1
体力: 3
威望: 0
当前: 四川成都
离线: 24 天

发短消息

57^# 大中小发表于 2008-5-12 09:15

不错！！！

q384684725

TOP

joymv

貌似没几年青春
中级会员

帖子: 263
体力: 419
威望: 0
当前: 江西南昌
离线: 1 天

专长 网页设计,PHP

58^# 大中小发表于 2008-5-12 13:19

下拉菜单中的了栏目也左边留点边际会更美观点..

iT堂

TOP

birdmj

初级会员

帖子: 28
体力: 65
威望: 0
当前: 福建厦门
离线: 18 天

59^# 大中小发表于 2008-5-12 19:28

可以用鼠标点击的方式展开或收缩下拉菜单吗？我尝试用ONCLICK来代替onmouseover,可是能实现点击展开，但不能点击收缩而且菜单链接也不可用了。望指教！！谢谢

鸟鸣之涧

TOP

andylau123

新手上路

帖子: 95
体力: 0
威望: 0
离线: 48 天

发短消息

60^# 大中小发表于 2008-5-13 00:57

向楼主学习~

TOP