垂直下拉菜单

最新推荐文章于 2021-09-11 00:12:11 发布

一叶舟轻-dly

最新推荐文章于 2021-09-11 00:12:11 发布

阅读量599

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/xinzhelantian/article/details/56479145

版权

<!DOCTYPE HTML>
<html>
<head>
    <title>垂直下拉菜单</title>
	<style type="text/css">
	    ul{ list-style:none; 
			padding:0px; 
		  }
		ul li{width:100px;}
		ul li a{
		   text-decoration:none;
		   background:#0099FF;
		   color:white;
		   height:40px;
		   line-height:40px;
		   text-align:center;
		   display:block;  
		   border-bottom:1px solid white;
		}
		ul li a:hover{background:#C0F;}
		.submenu{position:relative;}
		.memu-list{display:none;}
		.submenu:hover .memu-list{
			display:block; 
			position:absolute;
			top:5px;
			left:102px;
		}
	</style>
</head>
<body>
		<ul>
			<li><a href="#">首页</a></li>
			<li class="submenu"><a href="#">职业学院</a><!--注意标签控制的一类，修饰是加在什么地方的-->
				<ul class="memu-list">
					<li><a href="#">前端学院</a>

最低0.47元/天解锁文章

一叶舟轻-dly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直下拉菜单

垂直下拉菜单 ul{ list-style:none; padding:0px; } ul li{width:100px;} ul li a{ text-decoration:none; background:#0099FF; color:white; height:40px; line-height:40p
复制链接

扫一扫

专栏目录