码迷,mamicode.com
首页 > 其他好文 > 详细

下拉菜单

时间:2018-10-22 01:20:26      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:float   order   splay   ack   bsp   ref   tom   ali   ati   

比较简陋的下拉菜单;

 

 

 

 

 

 

贴代码:

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

 

下拉菜单

标签:float   order   splay   ack   bsp   ref   tom   ali   ati   

原文地址:https://www.cnblogs.com/hys-blog/p/9827726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!