打印

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

tdlisheng [楼主]

中级会员

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

发短消息

1^# 大中小发表于 2006-12-25 06:10

<!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-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;
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);
-moz-opacity:0.7;
}
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>

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

来源CSS菜单－下拉菜单效果http://www.mysheji.com/blog/trackback.asp?tbID=645

本帖最近评分记录

greengnn 威望 +1 鼓励分享 2007-1-9 13:06

TOP

liangren

初级会员

帖子: 69
体力: 161
威望: 0
离线: 138 天

发短消息

2^# 大中小发表于 2006-12-25 11:05

代码比较简单不错收藏先

TOP

esefei

阿飚
中级会员

帖子: 357
体力: 468
威望: 0
当前: 湖北武汉
离线: 22 天

发短消息

3^# 大中小发表于 2006-12-25 13:04

向楼主学习~

帆已扬，起航~

TOP

mrhts

新手上路

帖子: 5
体力: 12
威望: 0
离线: 553 天

发短消息

4^# 大中小发表于 2006-12-25 17:25

<!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-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;
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);
-moz-opacity:0.7;
}
.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;
}
</style>
</head>

<body>
<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>
</body>
</html>
http://www.wowmum.com

wowmum.com

TOP

sunland

艾丽丝
高级会员

帖子: 498
体力: 559
威望: 0
当前: 陕西咸阳
离线: 4 天

5^# 大中小发表于 2006-12-25 17:27

跟DIV+CSS排版查不多
参考
网页设计师:web标准教程及推广,网站重构,XHTML+CSS,CSS布局,DIV+CSS,validator,mozilla firefox
http://w3cn.org/

http://www.Apeman.com.cn

TOP

lkp528

北溟游鱼
银牌会员

帖子: 1186
体力: 1379
威望: 0
当前: 广东深圳
离线: 2 天

6^# 大中小发表于 2006-12-25 20:32

为什么定义了float:left怎么不向左对齐而总是向右对齐?

<!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-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:520px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
float:left
}
.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;
}
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>

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

When the door to happiness

TOP

wtzzy

亿网
高级会员

帖子: 473
体力: 663
威望: 2
当前: 辽宁沈阳
离线: 2 天

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

7^# 大中小发表于 2006-12-29 17:02

支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀支持呀

TOP

raselion

狮子流星
中级会员

帖子: 805
体力: 349
威望: 0
当前: 北京海淀区

专长 前端制作

8^# 大中小发表于 2006-12-29 17:29

最近正好用，现收藏了！

TOP

itmssliyan

高级会员

帖子: 219
体力: 504
威望: 0
当前: 广东江门
离线: 9 天

9^# 大中小发表于 2006-12-29 22:59

楼主的设计很好!收藏了啊!!

涂乌板2

TOP

bluefree

蓝色自由
初级会员

帖子: 87
体力: 133
威望: 0
离线: 26 天

10^# 大中小发表于 2006-12-29 23:17

还是不错的，谢谢了。

兴之所致,任性而为!

TOP

qqhu

创想设计
高级会员

帖子: 270
体力: 560
威望: 0
当前: 北京西城区
离线: 2 天

11^# 大中小发表于 2006-12-30 09:02

<!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-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;
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);
-moz-opacity:0.7;
}
.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; width:500px; height:40px;  }
</style>
</head>
<body>
<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 class="aaa"></div></div>
</body>
</html>

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

能不能让底下哪个 DIV 不动啊.....要不会影响布局的.

我的博客!

TOP

twostone

高级会员

帖子: 268
体力: 822
威望: 0
离线: 17 天

发短消息

12^# 大中小发表于 2006-12-30 10:48

引用:

原帖由 qqhu 于 2006-12-30 09:02 发表
<!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: ...

同意. 否则就只能欣赏而没有实际意义了.

TOP

mental

小鱼的理想
高级会员

帖子: 281
体力: 574
威望: 0
当前: 山东威海

发短消息

13^# 大中小发表于 2006-12-30 10:58

把连接放到<div>里,作个绝对定位应该可以解决问题 !

说到不如做到！

TOP

xupeixin

初级会员

帖子: 47
体力: 91
威望: 0
离线: 67 天

发短消息

14^# 大中小发表于 2006-12-31 10:27

做过了。好像不可以啊

TOP

sonic0828

新手上路

帖子: 73
体力: 4
威望: 0
离线: 107 天

发短消息

15^# 大中小发表于 2006-12-31 17:12

如果没有二级分类的导航，
建议还是用<dl><dt><dd>这样结构上更严谨。

QQ:173456

TOP

roypo

初级会员

帖子: 66
体力: 89
威望: 0
离线: 3 天

发短消息

16^# 大中小发表于 2007-1-2 11:32

WOW~~強丫~~

I'm stupid in stupid...

TOP

rainoxu

珍宝猪
银牌会员

帖子: 1099
体力: 2290
威望: 5
当前: 云南昆明
离线: 4 天

17^# 大中小发表于 2007-1-2 17:32

嗯,很不错的效果,速度挺快的呵,还没看代码,先支持了再说吧~~

博客: http://www.rainoina.com

TOP

lff20060308

初级会员

帖子: 42
体力: 92
威望: 0
离线: 523 天

发短消息

18^# 大中小发表于 2007-1-4 12:20

支持我想问的是这个是什么东东做的呢是dreamweaver做的吗？

TOP

393612783

初级会员

帖子: 33
体力: 53
威望: 0
离线: 60 天

发短消息

19^# 大中小发表于 2007-1-8 15:25

支持
向楼主学习

TOP

xujiebing

中级会员

帖子: 132
体力: 273
威望: 0
当前: 辽宁沈阳
离线: 2 天

20^# 大中小发表于 2007-1-9 09:41

顶了，收藏了。谢谢。向你学习

随意一点！www.bingb.com.cn

TOP

caitou

新手上路

帖子: 3
体力: 5
威望: 0
离线: 96 天

发短消息

21^# 大中小发表于 2007-1-9 09:54

好像不能实现不能让下面的div不动的
如果做成绝对定位的话估计在不同的分辨率下又会发生错误

TOP

huikof

高级会员

帖子: 360
体力: 753
威望: 2
离线: 27 天

发短消息

22^# 大中小发表于 2007-1-9 14:51

很不错。顶了一个。

http://shop34029167.taobao.com/

TOP

s4ld0ne

初级会员

帖子: 42
体力: 65
威望: 0
离线: 6 天

发短消息

23^# 大中小发表于 2007-1-9 15:06

有什么办法能解决2级菜单不把下面的布局给撑破..

TOP

skinyin

新手上路

帖子: 16
体力: 34
威望: 0
离线: 523 天

发短消息

24^# 大中小发表于 2007-1-13 14:56

回复 #6 lkp528 的帖子

你把#nav里面的绝对定位删除就可以靠左了

TOP

skinyin

新手上路

帖子: 16
体力: 34
威望: 0
离线: 523 天

发短消息

25^# 大中小发表于 2007-1-13 15:21

不知道大家是不是要的是这个效果呢？

<!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;
text-align:center;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
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{
position:relative;
width:600px;
height:30px;
border-bottom:0px;
padding:0;
position: relative;
}
.list{
line-height:20px;
text-align:center;
padding:4px;
}
.menu1{
width:120px;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.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;
}
#keai{position:absolute; left:0px; top:35px; background-color:#009900;width:500px; height:40px; z-index:-1}
</style>
</head>

<body>
<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 id="keai">dgd</div>
</div>
</body>
</html>

欢迎加我QQ：179748，一起研究WEB标准

TOP

AdamWan

大萬
高级会员

帖子: 254
体力: 590
威望: 2
当前: 北京海淀区
离线: 59 天

26^# 大中小发表于 2007-1-13 15:38

这个效果不错，收藏：）thx

IPICIQ.com 统统告诉你

TOP

wumengli

初级会员

帖子: 39
体力: 83
威望: 0
当前: 北京海淀区
离线: 10 天

发短消息

27^# 大中小发表于 2007-1-13 15:43

先收藏先

TOP

wjeasy

银牌会员

帖子: 1221
体力: 1129
威望: 1
当前: 山东济南

28^# 大中小发表于 2007-1-15 18:22

我是新手，我照着楼主的模仿了一个，可是为什么链接不能显示为块级元素呢？总是不能到头

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<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>
		</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>

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

[ 本帖最后由 wjeasy 于 2007-1-15 18:27 编辑 ]

蓝色宝贝

TOP

yadan

初级会员

帖子: 77
体力: 149
威望: 0
离线: 1 天

发短消息

29^# 大中小发表于 2007-1-18 11:02

如何支持一级菜单有链接呢。

我是人

TOP

yadan

初级会员

帖子: 77
体力: 149
威望: 0
离线: 1 天

发短消息

30^# 大中小发表于 2007-1-19 16:01

请求支援。。。多谢大虾们。

我是人

TOP