css 实现导航菜单

最新推荐文章于 2023-10-13 17:08:46 发布
最新推荐文章于 2023-10-13 17:08:46 发布
阅读量2.2k 收藏 22
点赞数
分类专栏： css基础 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiguang102/article/details/125603683
版权

阅读目录

1 css 实现二级导航菜单

html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>

 <nav>
	<ul class="level">
		<li><a href="">首页</a></li>
		<li>
			<a href="">栏目1</a>
			<ul class="two">
				<li>二级菜单1</li>
				<li>二级菜单2</li>
				<li>二级菜单3</li>
			</ul>
		</li>
		<li>
			<a href="">栏目2</a>
			<ul class="two">
				<li>二级菜单4</li>
				<li>二级菜单5</li>
				<li>二级菜单6</li>
			</ul>
		</li>
		<li>
			<a href="">栏目3</a>
			<ul class="two">
				<li>二级菜单7</li>
				<li>二级菜单8</li>
				<li>二级菜单9</li>
			</ul>
		</li>
		<li>
			<a href="">栏目4</a>
			<ul class="two">
				<li>二级菜单10</li>
				<li>二级菜单11</li>
				<li>二级菜单12</li>
			</ul>
		</li>
		<li>
			<a href="">栏目5</a>
			<ul class="two">
				<li>二级菜单13</li>
				<li>二级菜单14</li>
				<li>二级菜单15</li>
			</ul>
		</li>
	</ul>
</nav>

</body>
</html>

html 附 css

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css实现简单的导航栏下拉</title>
</head>
<style>
	/* 先重置一下html，消除HTML标签默认的内外边距 */
    *{padding: 0;margin: 0;}
	/* 对导航的内容设置一个主体为800px的宽并使其居中 */
    .wrap{width: 800px;margin: 0 auto;}
	/* 清除浮动 */
    .clear{clear: both;}
	/* 去掉默认a标签的下划线 */
    a{text-decoration-line: none;}
    ul,li{list-style: none;}
    nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
    nav .level>li a{color: black;}
	/* 设置鼠标滑过后的样式 */
    nav .level>li:hover{background: red;}
	/* 先使二级菜单的内容隐藏 */
    nav .two{display: none;margin-top: 10px;}
	/* 鼠标滑过一级菜单后的显示二级菜单 */
    nav .level>li:hover .two{display: block;}
    nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
    nav .two li:hover{background: pink;}
</style>
<body>

<nav>
	<div class="wrap">
		<ul class="level">
			<li><a href="">首页</a></li>
			<li>
				<a href="">一、栏目</a>
				<ul class="two">
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
				</ul>
			</li>
			<li>
				<a href="">栏目2</a>
				<ul class="two">
					<li>二级菜单4</li>
					<li>二级菜单5</li>
					<li>二级菜单6</li>
				</ul>
			</li>
			<li>
				<a href="">栏目3</a>
				<ul class="two">
					<li>二级菜单7</li>
					<li>二级菜单8</li>
					<li>二级菜单9</li>
				</ul>
			</li>
			<li>
				<a href="">栏目4</a>
				<ul class="two">
					<li>二级菜单10</li>
					<li>二级菜单11</li>
					<li>二级菜单12</li>
				</ul>
			</li>
			<li>
				<a href="">栏目5</a>
				<ul class="two">
					<li>二级菜单13</li>
					<li>二级菜单14</li>
					<li>二级菜单15</li>
				</ul>
			</li>
		</ul>
	</div>
</nav>


</body>
</html>

2 css 侧方位导航菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
       .page {
           width:100%;
           height:100%;
       }
        .nav {
            width:160px;
            height:205px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -103px;
        }
        .nav-li {
            width: 160px;
            height: auto;
            color: #FFF;
            line-height: 40px;
            background: #333;
            text-align: center;
            font-size: 16px;
            border-bottom:1px solid #FFF;
            cursor: pointer;
        }
        .tit {
            width: 160px;
            height: 40px;
        }
        .nav-li:hover ul {
            display: block;
        }
        .nav-li ul {
            width: 160px;
            height: auto;
            background: #FFFFFF;
            display: none;
        }
        .nav-li ul li {
            width: 160px;
            height: 40px;
            border-bottom:1px dashed #666;
            color: #333;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        .nav-li ul li:hover .list-3 {
            display: block;
        }

        .list-3 {
            width: 160px;
            height: auto;
            position: absolute;
            left: 160px;
            top: 0px;
            display: none;
        }
        .list-3Dom {
            width: 160px;
            height: 40px;
            background: #444;
            border-bottom:1px dashed #666;
            color: #FFF;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>

<div class="page">
	<div class="nav">
		<div class="nav-li">
			<div class="tit">侧方标题(一)</div>
			<ul>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="nav-li">
			<div class="tit">侧方标题(二)</div>
			<ul>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="nav-li">
			<div class="tit">侧方标题(三)</div>
			<ul>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
				<li>
					二级栏目
					<div class="list-3">
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
						<div class="list-3Dom">三级栏目</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="nav-li">
		</div>
	</div>
</div>

暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯

</body>
</html>

3 CSS实现三级导航（模板）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>纯css级联导航</title>
<style>
	body,div,ul,li,a{
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
	/* 一级导航 */
	 .one-nav li{
		list-style-type: none;
		float: left;
		width: 16.57%;
		text-align: center;
		background-color: #3391E6;
		border-right: 1px solid white;
		cursor: pointer;
		height: 30px;
		line-height: 30px;
	}
	 .one-nav li:nth-last-child(1){
		border-right: none;
	}
	 .one-nav li a{
		color: white;
	}
	 .one-nav li:hover .two-nav{
		display: block;
	}
	 .one-nav li:hover{
		background-color: #4260D7;
	}
	/* 二级导航 */
	 .two-nav {
		display: none;
	}
	 .two-nav li{
		width: 100%;
	}
	 .two-nav li:hover .three-nav{
		display: block;
		position: relative;
	}
	/* 三级导航 */
	 .three-nav{
		position: absolute;
		width:100%;
		left: 100%;
		bottom: 100%;
	}
	/* 最右边的三级导航显示在左边 */
	 .one-nav li:nth-last-child(1) .two-nav li .three-nav li{
		width: 100%;
		position:relative;
		right: 200%;
	}
</style>
</head>
<body>

<div class="main">
	<ul class="one-nav">
		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
			</ul>
		</li>

		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
			</ul>
		</li>

		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li>
					<a href="javascript:;">二级导航></a>
					<ul class="three-nav">
						<li><a href="javascipt:;">三级导航</a></li>
						<li><a href="javascipt:;">三级导航</a></li>
						<li><a href="javascipt:;">三级导航</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">二级导航</a></li>
			</ul>
		</li>

		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
			</ul>
		</li>

		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
			</ul>
		</li>

		<li>
			<a href="javascript:;">一级导航</a>
			<ul class="two-nav">
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li><a href="javascript:;">二级导航</a></li>
				<li>
					<a href="javascript:;"><二级导航</a>
					<ul class="three-nav">
						<li><a href="javascipt:;">三级导航</a></li>
						<li><a href="javascipt:;">三级导航</a></li>
						<li><a href="javascipt:;">三级导航</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
	
	
</body>
</html>

4 实现三级导航

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
	margin:0;
	padding: 0;
}
li{
	list-style: none;
	text-align: center;
}
a{
	text-decoration:none; color: #fff;
	font-size: 14px;
}
.one{
	width: 100%;
	height: 40px;
	background-color: #333;
	margin: 0 auto;
}
.one >li{
	float: left;
	width: 100px;
	line-height: 40px;
	border-left: 1px solid #eee;
	height: 40px;
	position: relative;
}
.two{
	display: none;
	position: absolute;
	width: 100%;
}
.two >li{
	height: 40px;
	width: 100px;
	background-color: #666;
	position: relative;
}
.one li a{
	display: block;/**/
}
.one>li:hover>ul{
	display: block;
}
.three{
	display: none;
	position: absolute;
	width: 100%;
	left: 100px;
	top: 0px;
}
.three li{
	background-color: red;
	height: 40px;
}
.two li:hover ul{
	display: block;
}
</style>
</head>
<body>

<ul class="one">
    	<li>
    		<a href="#">一级菜单</a>
    		<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li><a href="#">一级菜单</a>
    	<ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul></li>
    	<li>
    		<a href="#">一级菜单</a>
    	     <ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	 </li>
    	<li style="float:right;margin-right:200px;">
    		<a href="#">一级菜单</a>
    	      <ul class="two">
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">二级菜单</a>
    				<ul class="three">
    					<li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
	    	            <li><a href="#">三级菜单</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    
</body>
</html>
知其黑、受其白
关注
  • 0
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯CSS实现导航栏Tab切换效果
09-27
CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果
纯CSS实现导航栏下划线跟随滑动效果
09-27
主要介绍了纯CSS实现导航栏下划线跟随滑动效果,需要的朋友可以参考下
纯CSS实现导航栏下划线跟随的示例代码
09-24
主要介绍了纯CSS实现导航栏下划线跟随的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
CSS【导航栏】
随便写写
07-09 3825
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 和 元素非常有意义： 从列表中删除边距和填充： 创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色： 在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中： 可以在 or 上添加text-align:center 样式来让链接居中。可以在 border 上添加 borde............
css导航 导航菜单
07-15
css导航，触发型菜单，含有javascript程序代码
CSS实现导航菜单
weixin_43310703的博客
04-06 481
导航菜单 <style> *{ margin:0; padding:0;} ul{ list-style: none;} img{ display: block;} a{ text-decoration: none;} .clear:after{ content:""; display: block; clear:both;} #mai...
一个简单的纯css导航菜单（包含下拉菜单）
zythy的专栏
07-21 516
一个纯css简单的导航菜单，效果如下： 全部代码如下（复制另存为html文件即可）： <html> <head> <style> body{ position: relative; } .nav{ background-color: #4bafbe; height: 36px; } ...
css 导航界面,CSS界面组件之导航菜单
weixin_39612332的博客
08-03 374
title: CSS界面组件之导航菜单date: 2016-09-17 16:39tags: CSS界面组件 CSS0x00 纵向菜单代码示例:Document*{margin:0;padding:0;}nav{margin: 50px;width: 200px;}.list ul{border:1px solid #6a6bbc;border-radius: 3px;padding:5px 10...
CSS导航栏
weixin_60835328的博客
06-03 1866
CSS导航栏
17种漂亮css导航菜单
09-27
用css定义的17种网页导航菜单。。。值得学习哦
HTML+CSS制作导航栏
最新发布
qq_64867440的博客
10-13 2828
1.1效果展示。
纯css实现三级菜单栏
h1580824951的专栏
04-17 1万+
之前已经介绍了如何使用纯css实现二级菜单栏，其实三级菜单栏就是在二级菜单栏的基础上实现的。 我们先做成这个样子： 可以看到，这里我们在“关于我们”——“我们的故事”下面添加了三级菜单，这个只需要在“我们的故事”这个li里面添加一个ul即可实现； 不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题： 当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时，红框中
CSS实现垂直/水平导航栏
热门推荐
ZhuangXuward
04-11 2万+
先看效果 垂直导航栏 水平导航栏 导航栏 = 链接列表 导航栏需要标准的 HTML 作为基础。在我们的例子中，将用标准的 HTML 列表来构建导航栏。导航栏基本上是一个链接列表，因此使用 ul 和 li 元素是非常合适的：<ul> <li><a href="default.asp">Home</a></li> <li&gt...
利用css做导航栏,利用CSS制作导航栏
weixin_31090341的博客
08-03 9176
导航栏是一个网站不可或缺的一部分,它可以让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。基于初学者对css各种属性的综合运用还不是很熟练，小编今天就教大家怎样利用CSS各种属性制作导航栏。首先我们来看一些简单的导航栏效果:一、导航栏的基础代码导航栏基本上是一个链接列表，因此使用ul和li元素是非常合适的。我们先看一下基础代码:运行效果...
CSS导航栏菜单制作大全
寂寞的博客
03-02 2211
1.垂直导航栏看代码：<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; bac
用CSS样式制作导航菜单
每天进步一点点
06-23 853
#menu { width: 200px; font-family: "宋体"; } #menu ul li { list-style: none; } #menu ul li a { display: block; text-decoration: none; border: solid 1px #6600CC; padding: 5px 20px 10px 30px;
CSS之导航栏
Fancymeng的博客
09-01 1689
今天接着谈谈CSS CSS除了简单的文字背景样式外，还有着多样的格式本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
使用CSS 制作导航菜单 （一）
飘雪的随笔
12-10 600
<br />方式一：直接编写代码实现 <br />代码如下：<br /><br /><html><br /><head><br /><title>无需表格的菜单</title><br /><style><br /><!--<br />body{<br />    background-color:#ffdee0;<br />}<br />#navigation {<br />    width:200px;<br />    font-family:Arial;<br />}<br />#navigatio
使用css 实现导航栏 代码实现
04-20
好的，我可以为您提供关于使用CSS实现导航栏的代码实现。以下是一个简单的示例： HTML代码： ``` <div class="navbar"> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </div> ``` CSS代码： ``` .navbar { background-color: #333; /* 导航栏背景颜色 */ overflow: hidden; /* 隐藏溢出的导航项 */ } .navbar a { float: left; /* 左浮动导航项 */ color: white; /* 导航项文字颜色 */ text-align: center; /* 文字居中对齐 */ padding: 14px 16px; /* 导航项内边距 */ text-decoration: none; /* 去掉下划线 */ } .navbar a:hover { background-color: #ddd; /* 鼠标悬停时导航项背景颜色 */ color: black; /* 鼠标悬停时导航项文字颜色 */ } ``` 这个例子中，我们使用了一个`<div>`元素作为导航栏的父元素，并应用了一些CSS样式来设置导航栏的外观。每个导航项都是一个`<a>`标签，用`float`属性进行左浮动，使它们在一行上排列。 当鼠标悬停在导航项上时，应用了`:hover`伪类，以改变它们的背景颜色和文字颜色。 希望这个例子对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知其黑、受其白

喝个咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值