html里面的导航栏，怎么做出，都鼠标移上时，缓慢展开下部分内容，，鼠标移开时又缓慢收缩回去

html里面的导航栏，怎么做出，都鼠标移上时，缓慢展开下部分内容，，鼠标移开时又缓慢收缩回去

Jquery 有相应的控件，去看看懒人之家里面的开源导航组件

可以参考下bootstrap或者pintur等开源框架

http://www.runoob.com/try/try.php?filename=trycss3_transition1

把这个例子第二个样式的width 值的改变换成height 就可以实现

学习下bootstrap吧，里面有很多封装好的方法

加点css3动画 $("#xx").animate({height:"300px"},300);

 <style type="text/css">
            ul,li{
                padding: 0;
            }
            ul>li{
                list-style: none;
                float: left;
                width: 65px;
            }
            a{
                cursor: default;
                text-decoration: none;
            }
            li>ul{
                display: none;
            }
            ul>li:hover>ul{
                display: block;
            }
        </style>

        <div class="nav">
            <ul>
                <li>
                    <a href="">菜单1</a>
                    <ul>
                        <li><a href="">子菜单1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">菜单2</a>
                    <ul>
                        <li><a href="">子菜单1</a></li>
                    </ul>
                </li>
            </ul>
        </div>

随手用伪类写了个滑过显示，滑出隐藏的，然后结合animate 就可以做个动画效果了

1.css houver
2.事先写好div将其定位隐藏，使用js或jquery为元素绑定鼠标滑动事件，当你的鼠标移过去的时候触发该事件，在事件处理中显示隐藏的div