你们好，最近小榜发现有诸多的小伙伴们对于导航栏在哪，导航栏这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、先写好一个html的框架，加上导航栏的条目
2、<!DOCTYPE html>
3、<html>
4、<head>
5、 <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
6、 <style>
7、 </style>
8、</head>
9、<body>
10、 <div id="menu">
11、 <ul>
12、 <li>
13、 <a href="#">首页</a>
14、 </li>
15、 <li>
16、 <a href="#">介绍</a>
17、 <dl>
18、 <dd>
19、 <a href="#">简介</a>
20、 </dd>
21、 <dd>
22、 <a href="#">学院</a>
23、 </dd>
24、 <dd>
25、 <a href="#">校区</a>
26、 </dd>
27、 </dl>
28、 </li>
29、 <li>
30、 <a href="#">新闻</a>
31、 <dl>
32、 <dd>
33、 <a href="#">通知</a>
34、 </dd>
35、 <dd>
36、 <a href="#">简讯</a>
37、 </dd>
38、 <dd>
39、 <a href="#">公文</a>
40、 </dd>
41、 </dl>
42、 </li>
43、 </ul>
44、 </div>
45、</body>
46、</html>
47、用浏览器打开显示如下
48、首先添加初始化的css属性
49、把浏览器预设的padding和margin全部归零
50、效果如下
51、接下设置<div id="menu">的css属性
52、将位置固定
53、设置大小，100%即等于浏览器的显示宽度
54、设置其背景色
55、效果如下
56、接下添加<li>列表项目的css属性
57、去掉前面的小圆点
58、使列表项目横排
59、设置其大小
60、可得效果如下
61、上面的字样式与颜色样式与背景格格不入，这与<a>的属性有关
62、设置<a>的css属性
63、把下划线的效果去掉
64、把字的颜色改为#FFFFFF，字体为微软雅黑
65、可得效果如下
66、接着将ul列表排好版
67、宽度是<li>的个数乘<li>的宽即3*100=300px，高度和<li>一样
68、在div内居中
69、设置ul列表位置向下移32px
70、效果如下
71、接着设置dl列表项目的css属性
72、先是定好位，absolute是相对父级元素定位，top: 55px是元素顶端距离父级元素顶端55px
73、把dl的上端拓宽10px;
74、设置宽度和背景与li列表项目相同
75、接着设置dd列表项目的css属性
76、宽度要比dl小一些，上下各留出一些距离
77、设置下边框为虚线，1px，颜色为#EC933F
78、使dd居中，使dd内的文本也居中
79、效果如下
80、在li的css属性内也加上
81、使文本居中
82、总的样式就已经设置好了
83、接着我们要设置鼠标放在导航栏项目时的事件
84、先将dl列表隐藏，在dl的css属性加上
85、这样dl列表就隐藏了，接下来我要设置当鼠标放在导航栏项目上使，其相应的dl类别就会显示
86、加入下面css代码
87、下图为当鼠标放在项目介绍上时的效果
88、最后加上
89、当鼠标放在链接上时会变色
90、这样一个常见的导航栏就完成了，赋上完整css代码
91、* {
92、 margin: 0;
93、 padding: 0;
94、}
95、#menu {
96、 position: fixed;
97、 width: 100%;
98、 height: 55px;
99、 background: #9a0000;
100、}
101、li {
102、 list-style: none;
103、 float: left;
104、 width: 100px;
105、 height: 40px;
106、 text-align: center;
107、}
108、a {
109、 text-decoration: none;
110、 color: #000000;
111、 font-size: 16px;
112、 font-family: 微软雅黑;
113、 text-align: center;
114、}
115、ul {
116、 margin: auto;
117、 width: 300px;
118、 height: 40px;
119、 margin-top: 32px;
120、}
121、dl {
122、 position: absolute;
123、 top: 55px;
124、 padding-top: 10px;
125、 width: 100px;
126、 background: #9a0000;
127、 display: none;
128、}
129、dd {
130、 margin: auto;
131、 width: 80px;
132、 margin-top: 2px;
133、 margin-bottom: 5px;
134、 border-bottom: dashed 1px #EC933F;
135、 text-align: center;
136、}
137、ul li:hover dl{
138、 display: block;
139、}
140、a:hover{
141、 color: #D7643B;
142、}
以上就是导航栏这篇文章的一些介绍，希望对大家有所帮助。
