请教下，能用纯css实现导航按钮hover时滑动下拉出菜单吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4423 天前的主题，其中的信息可能已经有所发或是发生改变。

第 1 条附言 2013-09-02 16:11:22 +08:00

说用 hover+transition 的
drop块初始定位和 hover后的定位具体怎么设置
感觉这地方避不开的是需要取得 drop块的高度（因为需要滑动，这个高度其实是实际的滑动距离），但是不用js不可能取到
所以很疑惑

下拉出

hover

CSS

14 条回复 1970-01-01 08:00:00 +08:00

Sivan

2013-09-02 15:12:53 +08:00

当然可以

wandou

2013-09-02 15:16:52 +08:00

@Sivan 求指点。。

alay9999

2013-09-02 15:17:50 +08:00

li:hover ul{

}

alay9999

2013-09-02 15:18:59 +08:00

li ul{
display:none;
}

li:hover ul{
display:block;
}

wandou

2013-09-02 15:20:11 +08:00

@alay9999 滑动怎么做，自上而下滑出来那种

guchengf

2013-09-02 16:05:06 +08:00

CSS3 Transition ，具体方法Google

wandou

2013-09-02 16:11:50 +08:00

@guchengf 刚贴的附言

guchengf

2013-09-02 16:23:59 +08:00

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div>
<ul id="a">111
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</body>
</html>

#a li{
list-style: none;
background: black;
color: white;
height: 0px;
-moz-transition: height 2s ease;
-webkit-transition: height 2s ease;
-o-transition: height 2s ease;
transition: height 2s ease;
}
#a:hover li{
height: 20px;
}

上面是HTML，下面是CSS，你看是不是你要的效果

wandou

2013-09-02 16:55:57 +08:00

@guchengf 阿里嘎多，代码都贴出来了: )

不过高度变化其实是“伪滑动”

和真实的位移滑动效果差别还是很明显的