下拉菜单

Posted 2021-01-14 hys-blog

比较简陋的下拉菜单；

• 栏目一

  菜单一

  菜单二

  菜单三

• 栏目二

  菜单一

  菜单二

  菜单三

 

 

 

 

 

 

贴代码：

	<style type="text/css">
		* {margin: 0;padding: 0;}
		ul {list-style: none;}
		li {float: left;width: 140px;margin-right: 10px;}
		li dt {padding: 5px;text-align: center;border-bottom: 3px solid #b00;background: #ed8;}
		li dd {border-bottom: 1px solid gray;height: 31px;line-height: 31px;text-align: center;color: #fff;background: #3498db;}
		dd a {text-decoration: none;color: #fff;}
		dd {display: none;}
		li:hover dd {display: block;}
		dd:hover {background: green;}
	</style>

　　

<div class="nav">
		<ul>
			<li>
				<dl>
					<dt><strong><a href="#">栏目一</a></strong></dt>
					<dd><a href="#">菜单一</a></dd>
					<dd><a href="#">菜单二</a></dd>
					<dd><a href="#">菜单三</a></dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt><strong><a href="#">栏目二</a></strong></dt>
					<dd><a href="#">菜单一</a></dd>
					<dd><a href="#">菜单二</a></dd>
					<dd><a href="#">菜单三</a></dd>
				</dl>
			</li>
		</ul>
	</div>