下拉菜单怎么实现div+css

bluedream 2011-06-21 05:32:50

...全文

84 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

IcyFox 2011-06-21

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title>JQuery-菜单效果</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" rel="stylesheet" href="css/menu.css" />

        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript">

         $(document).ready(function(){

            $(".hmain").hover(function(){

            $(this).children("ul").stop(false,true).slideDown();

            },function(){

            $(this).children("ul").stop(false,true)slideUp();

    });

});

        </script>

    </head>

    <body>

        

        

        <ul>

            <li class="hmain">

                    <a href="#">菜单项1</a>

                <ul>

                    <li>

                        <a href="#">子菜单项11</a>

                    </li>

                    <li>

                        <a href="#">子菜单项12</a>

                    </li>

                </ul>

            </li>

            <li class="hmain">

                <a href="#">菜单项2</a>

                <ul>

                    <li>

                        <a href="#">子菜单项21</a>

                    </li>

                    <li>

                        <a href="#">子菜单项22</a>

                    </li>

                </ul>

            </li>

            <li class="hmain">

                <a href="#">菜单项3</a>

                <ul>

                    <li>

                        <a href="#">子菜单项31</a>

                    </li>

                    <li>

                        <a href="#">子菜单项32</a>

                    </li>

                </ul>

            </li>

        </ul>

    </body>

</html>



ul, li {

    /*清除ul和li上默认的小圆点*/

    list-style: none;

}

ul {

    /*清除子菜单的缩进值*/

    padding: 0;

    margin: 0;

}

.main, .hmain {

    background-image: url(../images/title.gif);

    background-repeat: repeat-x;

    width: 120px;

}

li {

    background-color: #EEEEEE;

}

a {

    /*取消所有的下划线*/

    text-decoration: none;

    padding-left: 20px;

    display: block;

    display: inline-block;

    width: 100px;

    padding-top: 3px;

    padding-bottom: 3px;

}

.main a, .hmain a {

    color: white;

    background-image: url(../images/collapsed.gif);

    background-repeat: no-repeat;

    background-position: 3px center;

}

.main li a, .hmain li a {

    color: black;

    background-image: none;

}

.main ul, .hmain ul {

    display: none;

}

.hmain {

    float: left;

    margin-right: 1px;

}