HTML下拉框二级菜单

article/2025/8/23 9:44:03

一、form表单

在这里插入图片描述

	<div><form><div><!-- 下拉框 --><select>//默认项为第一个<option>广州</option><option>深圳</option><option>山东</option><option>北京</option></select></div></form></div>

二、select标签

在这里插入图片描述

			<select ><optgroup label="Beijing"><option value="1">Shijingshanqu</option><option value="2">chaoyangqu</option></optgroup><optgroup label="Shanghai"><option value="1">Chongmingqu</option><option value="2">Minhangqu</option></optgroup></select>

实现效果和form表单基本相同。
optgroup中的label 属性为选项组规定描述（不为可选项）。
若不使用optgroup标签，这实现效果和form表单实现效果基本无异

在这里插入图片描述

			<select><option value="1">Beijing</option><option value="2">Shanghai</option><option value="3">Chongqing</option></select>

三、使用ul+css实现鼠标悬浮出现二级菜单（不包含选中效果）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding: 0;list-style: none;text-decoration: none;}#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}ul{background: #aaa}ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}ul li:hover{background: #cea;}ul li ul li{float: none;}/*关键一：将二级菜单设置为display：none;*/ul li ul{position: absolute;top:40px;left: 0; display: none;}ul li ul li:hover{background: red;}/*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/ul li:hover ul{display: block;}</style>
</head>
<body><div id="nav"><ul><li><a href="">首页</a></li><li><a href="">汽车</a><ul><li><a href="#">奥迪</a> </li><li><a href="#">道奇</a> </li></ul></li><li><a href="">手机</a><ul><li><a href="#">小米</a> </li><li><a href="#">华为</a> </li></ul></li><li><a href="">联系我们</a></li></ul></div>   
</body>
</html>

四、JQ实现下拉效果

在这里插入图片描述

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery下拉菜单</title><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style>
.wrap {width: 800px;margin: 0 auto;}
#nav {margin: 0;padding: 0;list-style: none;border-bottom-left-radius: 4px;-moz-border-radius-bottomleft: 4px;-webkit-border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-right-radius: 4px;height: 50px;padding-left: 15px;padding-right: 15px;
}#nav li {float: left;display: block;background: none;position: relative;z-index: 999;margin: 0 1px;
}#nav li a {display: block;padding: 0;font-weight: 700;line-height: 50px;text-decoration: none;color: #000000;padding: 0px 12px;
}#nav ul {position: absolute;left: 1px;display: none;margin: 0;padding: 0;list-style: none;padding-bottom: 3px;background-color: #fff;z-index: 1000;
}.nav_link a:hover {border-bottom: #FF7D14;
}#nav ul li {float: none;text-align: left;margin: 5px;
}#nav ul li:hover {border-left: 0px solid transparent;border-right: 0px solid transparent;
}#nav ul a {display: block;height: 20px;line-height: 20px;padding: 8px 5px;text-transform: uppercase;font-weight: normal;
}#nav a:hover {text-decoration: none;color: #ff7d14;
}#nav li:hover {text-decoration: none;border-bottom: 1px solid #ff7d14;
}#nav ul {margin: 0 0 0 -2px;
}</style>
</head>
<body><div class="wrap"><ul id="nav"><li><a href="#">网站主页</a></li><li><a href="#">关于我</a><ul><li><a href="#">Company</a></li><li><a href="#">Authors</a></li><li><a href="#">Advertising</a></li></ul></li><li><a href="#">RSS订阅</a><ul><li><a href="#">PSD</a></li><li><a href="#">Patterns</a></li><li><a href="#">Icons</a></li></ul></li><li><a href="#">精美博文</a><ul><li><a href="#">HTML5</a></li><li><a href="#">CSS3</a></li><li><a href="#">jQuery</a></li><li><a href="#">MySQL</a></li></ul></li><li><a href="#">Web工具</a><ul><li><a href="#">Performance</a></li><li><a href="#">CMS Plugins</a></li><li><a href="#">Cheat Sheets</a></li></ul></li><li><a href="#">Originals</a><ul><li><a href="#">Website Design</a></li><li><a href="#">Mobile</a></li></ul></li></ul></div><script type="text/javascript">$(document).ready(function() {$('#nav li').hover(function() {$('ul', this).slideDown(200);$(this).children('a:first').addClass("hov");}, function() {$('ul', this).slideUp(100);$(this).children('a:first').removeClass("hov");});});</script>
</body>
</html>