下拉菜单

最新推荐文章于 2025-01-23 10:58:15 发布

diaoqi1518

最新推荐文章于 2025-01-23 10:58:15 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/hys-blog/p/9827726.html

版权

比较简陋的下拉菜单；

栏目一
菜单一

菜单二

菜单三
栏目二
菜单一

菜单二

菜单三

贴代码：

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

转载于:https://www.cnblogs.com/hys-blog/p/9827726.html