导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。
工具/材料Sublime Text
首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示
接下来我们在html的body结构里添加导航条的内容，如下图所示
然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面
最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色
首先要建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
一、定义一个盒子（“menu”）,用来装这个导航的。二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
