二级下拉菜单

来源：互联网发布：网络维修工具包编辑：程序博客网时间：2024/04/30 03:46

html中的元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="css/common.css" type="text/css" rel="stylesheet">    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script></head><body><div class="memu">    <div class="menu_tree">        <ul class="drop">            <li onmouseover="showsub(this)" onmouseout="hidesub(this)">                <a href="#" class="aa">                    <div class="change">                        <img  id="img_menu_community_manage.png" src="img/menu_community_manage.png">                        <span class="span_title"> 社区管理</span>                    </div>                </a>                <ul class="drop_1">                    <li><a class="menu_a" href="社区选择.html" target="showframe" onclick="openSrc('menu_community');">                        <div class="menu_info" id="menu_community">                            <img class="menu_img" id="img_menu_community" class="img_menu_community" src="img/menu_community.png">                            <span class="span_title">楼栋信息</span>                        </div>                    </a></li>                    <li> <a class="menu_a" href="业主信息.html" target="showframe" onclick="openSrc('menu_information');">                        <div class="menu_info" id="menu_information">                            <img class="menu_img" id="img_menu_information" src="img/menu_information.png">                            <span class="span_title">业主信息</span>                        </div>                    </a></li>                </ul>            </li>        </ul>        <a class="menu_a" href="公告发布.html" target="showframe" onclick="openSrc('menu_notice');">            <div class="menu_info" id="menu_notice">                <img class="menu_img" id="img_menu_notice" src="img/menu_notice.png">                <span class="span_title">公告发布</span>            </div>        </a>        <a class="menu_a" href="投票管理.html" target="showframe" onclick="openSrc('menu_vote');">            <div class="menu_info" id="menu_vote">                <img class="menu_img" id="img_menu_vote" src="img/menu_vote.png">                <span class="span_title">投票管理</span>            </div>        </a>        <a class="menu_a" href="报修管理.html" target="showframe" onclick="openSrc('menu_fix');">            <div class="menu_info" id="menu_fix">                <img class="menu_img" id="img_menu_fix" src="img/menu_fix.png">                <span class="span_title">报修管理</span>            </div>        </a>        <a class="menu_a" href="物业账单.html" target="showframe" onclick="openSrc('menu_check');">            <div class="menu_info" id="menu_check">                <img class="menu_img" id="img_menu_check" src="img/menu_check.png">                <span class="span_title">物业账单</span>            </div>        </a>        <a class="menu_a" href="投诉管理.html" target="showframe" onclick="openSrc('menu_complaint');">            <div class="menu_info" id="menu_complaint">                <img class="menu_img" id="img_menu_complaint" src="img/menu_complaint.png">                <span class="span_title">投诉管理</span>            </div>        </a>        <a class="menu_a" href="版本发布.html" target="showframe" onclick="openSrc('menu_edition');">            <div class="menu_info" id="menu_edition">                <img class="menu_img" id="img_menu_edition" src="img/menu_edition.png">                <span class="span_title">版本发布</span>            </div>        </a>        <a class="menu_a" href="申请账号.html" target="showframe" onclick="openSrc('menu_apply');">            <div class="menu_info" id="menu_apply">                <img class="menu_img" id="img_menu_apply" src="img/menu_apply.png">                <span class="span_title">申请账号</span>            </div>        </a>    </div></div><script language="javascript" type="text/javascript">    function openSrc(inputType) {        $(".menu_info").each(function () {            var id = $(this).attr("id");            $(this).removeClass('rb');            $("#img_" + id).attr('src', 'img/' + id + ".png");        })        $("#" + inputType).addClass('rb');        $("#img_" + inputType).attr("src", "img/" + inputType + "_s.png");    }    function showsub(li){        var submenu=li.getElementsByTagName("ul")[0];        submenu.style.display="block";    }    function hidesub(li){        var submenu=li.getElementsByTagName("ul")[0];        submenu.style.display="none";    }</script></body></html>

css样式的元素

@charset "utf-8";html, body{    margin: 0;    padding: 0;    height: 100%;}hr{margin-left: 15px; margin-right: 15px; height:1px;border:none;border-top:1px solid #555555;}.body_comm{    background-color: #E6E9EC;    min-height: 800px;    height: auto;}.memu{width: 250px; height: 100%; float: left;background-color: #2d2f31;}.drop{list-style:none;cursor: pointer; width: 100%;display: block;}.drop_1{list-style:none;cursor: pointer; width: 100%;display: none;margin-left: -70px;}.aa{text-decoration: none;}.change{height: 60px; line-height: 80px;vertical-align: middle; width: 245px; font-size: 20px; color: white; cursor: pointer; margin-left: 0px;}.logo{width: 250px; height: 74px; float: left; background-color: #f5a22b;}.img_logo{margin-top: 15px; width: 200px; margin-left: 25px;}.menu_tree{width: 100%; float: left; margin-top: 18px;}.rb{border-right: 5px solid #f5852b; width: 245px; background-color: #505255;}.menu_a{cursor: pointer; width: 100%;text-decoration:none;}.menu_info{height: 60px; line-height: 60px; vertical-align: middle; width: 245px; font-size: 20px; color: white; cursor: pointer; margin-left: 0px;}.menu_img{margin-left: 35px; border: 0px;}.span_title{margin-left: 15px;}

1 0