下拉菜单怎么实现div+css

<h1 class="type"><a href="javascript:void(0)">地面观测[自动站]</a></h1>
<div class="content">
<h2></h2>
<ul class="MM">
<li><a
href="${rootUrl}objectiveForecast/obs/auto/manage.do?type=_obs_sfc02_uv_f0">水平风</a></li>
<li><a
href="${rootUrl}objectiveForecast/obs/auto/manage.do?type=_obs_sfc02_t_f0">温度</a></li>
<li><a
href="${rootUrl}objectiveForecast/obs/auto/manage.do?type=_obs_sfc02_td_f0">露点湿度</a></li>
<li><a
href="${rootUrl}objectiveForecast/obs/auto/manage.do?type=_obs_sfc02_rh_f0">相对湿度</a></li>
<li><a
href="${rootUrl}objectiveForecast/obs/auto/manage.do?type=_obs_sfc02_pstn_f0">测站气压</a></li>
</ul>
<h3></h3>
</div>

解决方案 »

  1.   


    <!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;
    }