css 实现导航菜单
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 实现导航菜单相关的知识，希望对你有一定的参考价值。
阅读目录
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的宽并使其居中 */
.wrapwidth: 800px;margin: 0 auto;
/* 清除浮动 */
.clearclear: both;
/* 去掉默认a标签的下划线 */
atext-decoration-line: none;
ul,lilist-style: none;
nav .level>lifloat: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;
nav .level>li acolor: black;
/* 设置鼠标滑过后的样式 */
nav .level>li:hoverbackground: red;
/* 先使二级菜单的内容隐藏 */
nav .twodisplay: none;margin-top: 10px;
/* 鼠标滑过一级菜单后的显示二级菜单 */
nav .level>li:hover .twodisplay: block;
nav .two lipadding: 5px 0;transition: .4s;cursor: pointer;
nav .two li:hoverbackground: 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"<以上是关于css 实现导航菜单的主要内容，如果未能解决你的问题，请参考以下文章