一、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>

慢慢复习，慢慢补充吧

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟