只使用css显示隐藏一个下拉菜单

最新推荐文章于 2024-01-29 11:12:36 发布

牛牪犇0

最新推荐文章于 2024-01-29 11:12:36 发布

阅读量1.7k

点赞数 5

分类专栏： HTML

原文链接：https://www.cnblogs.com/chunshu/p/5417638.html

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

只用css的hover显示一个下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style>
		*{margin:0px;padding:0px;}
		a{text-decoration: none;}
		.one{width:200px;height:40px;background:#999;margin:0 auto;text-align: center;line-height: 40px;color:#fff;position: relative;margin-top:40px;}
		.two{width:100%;height:auto;overflow: hidden;position: absolute;display: none;}
		.two a{height:40px;line-height: 40px;display: block;text-align: center;background: #EAEAEA;border-bottom: 1px solid #D0D0D0;}
		.one:hover .two{display: block;}
		.one b{width:40px;height:40px;background: url(../img/arrow.gif) no-repeat center top;display: block;float:right;}
		.one:hover b{width:40px;height:40px;background: url(../img/arrow.gif) no-repeat center -40px;display: block;float:right;}
	</style>
</head>
<body>
	 <div class="one">下拉菜单<b></b>
            <div class="two">
                <a href="">一</a>
                <a href="">二</a>
                <a href="">三</a>
                <a href="">四</a>
                <a href="">五</a>
            </div>
        </div>
</body>
</html>