导航菜单栏的子菜单隐藏

最新推荐文章于 2022-02-16 16:00:23 发布

世纪殇

最新推荐文章于 2022-02-16 16:00:23 发布

阅读量825

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/dasgk/article/details/103150654

版权

网页专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		
		.sub1 li {
			display: inline; /* 导航菜单顶级菜单不换行 */
			width: 155px;;  /*保证宽度，不移动*/
			float: left; /* 左对齐 */
			margin: 0;
			padding: 0;
		} 
		
		.sub2 {
			display: none;
			list-style: none;			
			
		}
		
		.sub2 li {
			text-align: center;
		}
		
		a:hover + .sub2 {			
			display: block;
			float: right;
			margin-left: -4em;;
		}
		
	</style>

	<body>
		<ul class="sub1">
			<li>
				<a href="http://www.baidu.com">这是测试超链接</a>
				<ul class="sub2">
					<li> 菜单1</li>
					<li> 菜单2</li>
				</ul>
			</li>
			<li>
				<a href="http://www.baidu.com">这是测试超链接</a>
				<ul class="sub2">
					<li> 菜单3</li>
					<li> 菜单4</li>
				</ul>
			</li>
		</ul>
	</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

世纪殇

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
导航菜单栏的子菜单隐藏

<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .sub1 li { display: inline; /* 导航菜单顶级菜单不换行 */ width: 155px;; /*保证宽度，不移动*/ float...
复制链接

扫一扫