横向纵向下拉框

最新推荐文章于 2024-06-12 10:20:07 发布

原创最新推荐文章于 2024-06-12 10:20:07 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

#class #stylesheet #function #string #menu #path

.main { font: normal medium; background: blue; background-repeat: inherit; } .sub { font: normal small; background: gray; width: 88px; } .subs{ display:none; float:none; width: 88px; } .main a { text-decoration: none; color: white; } .sub a { /*取消下划线*/ text-decoration: none; color: black; /*20的缩进 */ } div .menu{ float:left; border:1px solid red } <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="js/menu.js" mce_src="js/menu.js"></mce:script> <link rel="stylesheet" type="text/css" href="css/css.css" mce_href="css/css.css"> </head> <body> <div id="menus"> <div class="menu"> <span class="main"><a href="">主菜单项 1</a> </span> <div class="subs"> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> </div> </div> <div class="menu"> <span class="main"><a href="">主菜单项 1</a> </span> <div class="subs"> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> </div> </div> <div class="menu"> <span class="main"><a href="">主菜单项 1</a> </span> <div class="subs"> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> <div class="sub"> <a href="">子菜单项</a> </div> </div> </div> </div> </body> </html> $(init) function init() { var menu = $(".menu"); menu.hover(f1,f2); } function f1(){ var th=$(this); var subs=th.children(".subs"); subs.slideDown(); //subs.show(); } function f2(){ var th=$(this); var subs=th.children(".subs"); subs.slideUp(); // subs.hide(); } // //function init() { // var menu = $(".menu"); // menu.mouseover(mo); // menu.mouseout(mout); // //} //function mo(){ // var th=$(this); // var subs=th.children(".subs"); // subs.show(); //} //function mout(){ // var th=$(this); // var subs=th.children(".subs"); // subs.hide(); //}