第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！
1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
</head>
<body>
<div id="menu" class="nav">
<ul>
<li><a href="#">标题1</a></li>
<li><a href="#">标题2</a></li>
<li><a href="#">标题3</a>
<ul>
<li><a href="#">子标题1</a></li>
<li><a href="#">子标题2</a></li>
</ul>
</li>
<li><a href="#">标题4</a></li>
<li><a href="#">标题5</a></li>
</ul>
</div>
</body>
</html>
以上代码的效果如下图
2.下面就通过div和CSS的编写来改变他的样式
首先给导航栏这一层规定高和宽，这根据实际项目具体修改就可以，我为了给大家演示效果，代码如下
#menu {
background-color: #07f8bc;//背景颜色
height: 40px;
width: 750px;
margin-right: auto;//以下设置导航层居中
margin-left: auto;
}
效果如下图
这样看起来很丑，大家不要着急，下面我们通过CSS样式控制来让它变成我们想要的样子
3.设置<ul>和<li>的样式
通过编写<li>的样式，让列表变成我们想要的横排的样式，代码如下：
设置列表的宽
.nav ul{
width:980;
}
.nav ul li{
float:left;//左浮动，让列表项变为横排
list-style-type:none;/*设置列表的格式。也就是把列表前面的点或者其他样式隐藏*/
}
效果如下图所示
列表虽然变成了横排，但是看起来还是不如我们在其他网站上面看的那些导航栏那么好看。所以我们要继续对超链接进行样式设置
4.设置<a>标签的样式
代码如下：
.nav ul li a{
width:120px;
height:28px;
line-height:28px;//两个超练级间距
margin:5px 10px;//设计边距
text-align:center;
text-decoration:none;//取消超链接的下划线
display:block;//超链接以块级标签显示
background:#07f8bc;
}
.nav ul li a:link{/*鼠标点击超链接时的状态*/
width:120px;
height:28px;
line-height:28px;
background:#07f8bc;
}
.nav ul li a:hover {/*鼠标点击超链接时的状态*/
width:120px;
height:28px;
line-height:28px;
background:#fff;
}
效果如下：
可以看出，现在的<a>已经变成块级标签了，但是相信大家看出来了，为什么标题4，标题5，改变了位置？因为我们想实现的导航栏是嵌套子标题的，也就是说在列表里面嵌套列表。所以，我们对子标题还没有控制样式，子标题就把标题4，标题5给挤出3了div层。下面我们设置子列表的样式来让导航栏变成我们想要的样子。
5.子列表的样式设置
我们想把子列表竖排显示，并且隐藏子列表，当鼠标经过它的父列表时显示子列表，下面我们开始写代码
.nav ul li ul{
display:none;/*隐藏子列表的显示，这个属性必须给出*/
padding:0px;
margin:0px;
}
.nav ul li ul li{
margin-left:10px;
float:none;//取消浮动，让列表标签竖排显示
padding:0px 0px 0px 0px;
}
.nav ul li ul li a{
width:120px;
height:28px;
text-align:center;
text-decoration:none;/*设置取消下划线*/
display:block;/*将<a>转换为块级元素*/
background:#bcb9b7;
margin:0px 0px 0px 0px;
}
.nav ul li:hover ul{/*鼠标经过时显示子标题，此属性也必须给出，不然鼠标经过时也不会显示子列表*/
display:block;
}
添加以上代码后，我们的标题栏就会如下图所示：
这就是我们预期的标题栏效果。菜鸟一只，希望对WEB前端感兴趣的你多多跟我交流，很喜欢交朋友。也希望这方面的大牛多多指点，向你们学习。谢谢浏览！
