你能看得懂的二级水平导航菜单教程~v~

最新推荐文章于 2021-08-03 19:28:32 发布

枫晨QL

最新推荐文章于 2021-08-03 19:28:32 发布

阅读量4.5k

点赞数 2

分类专栏： Web 文章标签： 1024程序员节 css html

本文链接：https://blog.csdn.net/justdoit936/article/details/109262309

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

你能看得懂的二级水平导航菜单教程~v~

1.先布局HTML
- 2.CSS样式实现
- - 3.全部代码
  - - 4.小结

在这里插入图片描述

1.先布局HTML

html代码如下：

<ul>
		<li><a href="">首页</a></li>
		<li><a href="">课程</a>
			<ul>
				<li><a href="">语文</a></li>
				<li><a href="">数学</a></li>
				<li><a href="">英语</a></li>
				<li><a href="">政治</a></li>
			</ul>
		</li>
		<li><a href="">活动</a>
			<ul>
				<li><a href="">读书</a></li>
				<li><a href="">睡觉</a></li>
				<li><a href="">睡觉</a></li>
				<li><a href="">游戏</a></li>
			</ul>
		</li>
		<li><a href="">生活</a>
			<ul>
				<li><a href="">好好学习</a></li>
				<li><a href="">Do it !</a></li>
			</ul>
		</li>
	</ul>

效果图如下：
在这里插入图片描述

2.CSS样式实现

代码如下：

ul{
			margin: 0;
			padding: 0px;

		}
		ul li{
			height: 30px;
			width:115px;
			list-style:none;
			float:left;
			display:inline;
			text-align:center;
			font:0.9em Arial, Helvetica, sans-serif;
		}
		ul li a {
			color:#fff;
			width:113px;
			margin:0px;
			padding:0px 0px 0px 8px;
			text-decoration:none;
			display:block;
			background:pink;
			line-height:29px;
			border-right:1px solid green;
			border-bottom:1px solid green;
		}
		ul li ul li{
			height:25px;
		}
		ul li ul li a{
			background:pink;
			line-height:24px;
		}
		ul li a:hover{
            background:yellow;
            border-bottom:1px dashed #ff0000;
		}
        ul li ul{
        	visibility:hidden;
        }
        ul li:hover ul{
        	visibility:visible;
        }
        ul li ul li a:hover{
        	background:pink;
        }

效果图如下：

在这里插入图片描述

3.全部代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul{
			margin: 0;
			padding: 0px;

		}
		ul li{
			height: 30px;
			width:115px;
			list-style:none;
			float:left;
			display:inline;
			text-align:center;
			font:0.9em Arial, Helvetica, sans-serif;
		}
		ul li a {
			color:#fff;
			width:113px;
			margin:0px;
			padding:0px 0px 0px 8px;
			text-decoration:none;
			display:block;
			background:pink;
			line-height:29px;
			border-right:1px solid green;
			border-bottom:1px solid green;
		}
		ul li ul li{
			height:25px;
		}
		ul li ul li a{
			background:pink;
			line-height:24px;
		}
		ul li a:hover{
            background:yellow;
            border-bottom:1px dashed #ff0000;
		}
        ul li ul{
        	visibility:hidden;
        }
        ul li:hover ul{
        	visibility:visible;
        }
        ul li ul li a:hover{
        	background:pink;
        }
	</style>
</head>
<body>
	<ul>
		<li><a href="">首页</a></li>
		<li><a href="">课程</a>
			<ul>
				<li><a href="">语文</a></li>
				<li><a href="">数学</a></li>
				<li><a href="">英语</a></li>
				<li><a href="">政治</a></li>
			</ul>
		</li>
		<li><a href="">活动</a>
			<ul>
				<li><a href="">读书</a></li>
				<li><a href="">睡觉</a></li>
				<li><a href="">睡觉</a></li>
				<li><a href="">游戏</a></li>
			</ul>
		</li>
		<li><a href="">生活</a>
			<ul>
				<li><a href="">好好学习</a></li>
				<li><a href="">Do it !</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

4.小结

要熟记常用的样式。
干就对了！
Do it !

枫晨QL

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
你能看得懂的二级水平导航菜单教程~v~

你能看得懂的二级水平导航菜单教程~v~1.先布局HTML2.CSS样式实现3.全部代码4.小结1.先布局HTMLhtml代码如下：<ul> <li><a href="">首页</a></li> <li><a href="">课程</a> <ul> <li><a href="">语文</a></li> <li&g
复制链接

扫一扫