打印

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

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

TOP

没找到相关资料,请大虾指点一二,多谢。。。
我是人

TOP

老大们,真的无救了吗?
楼主,您在不。。。
我是人

TOP

走投无路,只好放弃。。。
我是人

TOP



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

TOP

不行啊

楼主

TOP

这个真不错。收了。

TOP



 提示:您可以先修改部分代码再运行
我目前使用的菜单,用一个国外菜单修改的,用JS控制,效果不错

TOP

timeout is not defined,是什么错误

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


能有人把修正一下吗?

TOP

#

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

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

TOP

还不错!

TOP

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

TOP

Askyboy
学习

TOP

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

TOP

引用:
原帖由 qingerwusan 于 2007-6-5 16:17 发表
Askyboy
学习
啥意思?
我正好好学习哦

TOP

能不能做成三级四级的呀,我想要一个
大连

TOP

下面的不动...



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

TOP

很好的帖子,不错,收藏了
中国专业另类图片站:www.yutow.com

TOP

顶顶! 研究下!

TOP

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

TOP

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

TOP

还是用绝对路径解决的!~

TOP

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

TOP

楼主  我把你的<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

好东西啊!!收藏了!

好东西啊!!收藏了!

TOP

谢谢楼主了

TOP

不错!!!
q384684725

TOP

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

TOP

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

TOP

向楼主学习~

TOP