页面下拉菜单实现(Jquery 协助实现)

JavaScript:

$(document).ready(function(){ $("#firstpane p.menu_head").click(function() { $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); }); $("#firstpane p.menu_head").mouseover(function() { $(this).css({background:"#2286c6"}); $(this).css({color:"#f96"}); }); $("#firstpane p.menu_head").mouseout(function() { $(this).css({background:"#93cdff"}); $(this).css({color:"#069"}); });});

CSS:

@charset "utf-8";.menu_list {width: 118px;}.menu_head {padding: 8px 8px;cursor: pointer;position: relative;margin:1px 0px; font-weight:bold; background: #93cdff;}.menu_body {display:none;}.menu_body a {padding:1px;display:block;color:#006699;background-color:#EFEFEF;font-weight:bold;text-decoration:none;} .menu_body a:hover {color:#7fb2f4;background-color:#dfdfdf;text-decoration:underline;}

HTML:

<div id="firstpane" class="menu_list"> <p class="menu_head"><a href="./index.jsp" mce_href="index.jsp">Home</a></p> <p class="menu_head">One</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> <p class="menu_head">Two</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> <p class="menu_head">Three</p> <div class="menu_body"> <a href="#" mce_href="#">子菜单1</a> <a href="#" mce_href="#">子菜单2</a> <a href="#" mce_href="#">子菜单3</a> </div> </div>