1. 程式人生 > >CSS 導航下拉選單

CSS 導航下拉選單

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自學教程(如約智惠.com)</title> 
		<style >
			ul {
				list-style-type:none;
				margin:0;
				padding:0;
				overflow:hidden;
				background-color:#333;
			}
			
			li {
				float:left;
			}
			
			li a, .dropbtn {
				display:inline-block;
				color:white;
				text-align:center;
				padding:14px 16px;
				text-decoration:none;
			}
			
			li a:hover, dropdown:hover .dropbtn {
				background-color:red;
			}
			
			li.dropdown {
				display:inline-block;
			}
			
			.dropdown-content {
				display:none;
				position:absolute;
				background-color:#f9f9f9;
				min-width:160px;
				bax-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
			}
			
			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
				text-align: left;
			}
						
			.dropdown-content a:hover {
				background-color:#f1f1f1;
			}
			
			.dropdown:hover .dropdown-content {
				display:block;
			}
			
		</style>
	</head>
	<body >
		<ul>
		  <li><a class="active" href="#home">主頁</a></li>
		  <li><a href="#news">新聞</a></li>
		  <li class="dropdown">
			<a href="#" class="dropbtn">下拉選單</a>
			<div class="dropdown-content">
			  <a href="#">連結 1</a>
			  <a href="#">連結 2</a>
			  <a href="#">連結 3</a>
			</div>
		  </li>
		</ul>

		<h3>導航條插入下拉選單</h3>
		<p>滑鼠移動到"下拉選單"顯示列表</p>

		
	</body>
</html>