博客园首页的导航是纵向导航，今天模仿写了个横向导航的。 哈哈一会再写个纵向导航的就当练练手哈

<!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/html; charset=gb2312" />
<title>模仿博客园首页导航菜单</title>
<style type="text/css">
	/*第一步  先把无序列表前面发符号去掉 同时把内外间隔设为0*/
	ul{
		margin:0;
		padding:0;
		list-style:none;
	}
	
	/*第二步 把所有的列表项设置一个宽度 让它们都浮动在左边*/
	li{
		float:left;
		width:110px;
	}
	
	/*第三步 隐藏掉子菜单*/
	li ul{
		display:none;
	}
	
	/*第四步 当鼠标移动到列表项上显示其下的子菜单*/
	li:hover ul{
		display:block;
	}
	
	/*第五步 给超链接加个修饰 边框，字体大小，字体位置....*/
	li a{
		display:block;
		text-decoration:none;
		font-size:14px;
		border:1px solid #FF6600;
		text-align:left;
	}
	
	/*第六步 鼠标移动到超链接上给其附上一个背景色*/
	li a:hover{
		background:#FF9900;
	}
	
	li ul li a{
		border-top-width:0;/*子菜单项的边框线重合在一起看起来有点儿粗  所以就去掉顶部边框线*/
	}
	
	#nav li a{
		border-left-width:0;
		border-right-width:0;
	}
	
</style>
</head>

<body>
<ul id="nav">
	<li>
		<a href="#">.Net技术类</a>
		<ul>
			<li><a href="#">ASP.Net</a></li>
			<li><a href="#">C#</a></li>
			<li><a href="#">WinForm</a></li>
			<li><a href="#">SilverLight</a></li>
			<li><a href="#">WCF</a></li>
			<li><a href="#">CLR</a></li>
		</ul>
	</li>
	<!--第一个菜单结束-->
	
	<li>
		<a href="#">编程语言</a>
		<ul>
			<li><a href="#">Java</a></li>
			<li><a href="#">C#</a></li>
			<li><a href="#">PHP</a></li>
			<li><a href="#">Delphi</a></li>
			<li><a href="#">C</a></li>
			<li><a href="#">Ruhy</a></li>
		</ul>		
	</li>
	<!--第二个菜单结束-->
	
	<li>
		<a href="#">软件设计</a>
		<ul>
			<li><a href="#">架构设计</a></li>
			<li><a href="#">面向对象</a></li>
			<li><a href="#">设计模式</a></li>
		</ul>
	</li>
	<!--第三个菜单结束-->
	
	<li>
		<a href="#">Web前端</a>
		<ul>
			<li><a href="#">html/css</a></li>
			<li><a href="#">Javascript</a></li>
			<li><a href="#">JQuery</a></li>
			<li><a href="#">Html5</a></li>
		</ul>	
	</li>
	<!--第四个菜单结束-->
	
	<li>
		<a href="#">企业信息化</a>
		<ul>
			<li><a href="#">Sap</a></li>
			<li><a href="#">SharePoint</a></li>
			<li><a href="#">GIS技术</a></li>
			<li><a href="#">Oracle ERP</a></li>
			<li><a href="#">Dynamics CRM</a></li>
			<li><a href="#">企业信息化其它</a></li>
		</ul>	
	</li>
	<!--第五个菜单结束-->
	
	<li>
		<a href="#">手机开发</a>
		<ul>
			<li><a href="#">Android开发</a></li>
			<li><a href="#">iPhone开发</a></li>
			<li><a href="#">Windows Mobile</a></li>
			<li><a href="#">其它手机开发</a></li>
		</ul>	
	</li>
	<!--第六个菜单结束-->
	
	<li>
		<a href="#">软件工程</a>
		<ul>
			<li><a href="#">敏捷开发</a></li>
			<li><a href="#">项目与团队管理</a></li>
			<li><a href="#">软件工程其它</a></li>
		</ul>
	</li>
	<!--第七个菜单结束-->
	
	<li>
		<a href="#">数据库技术</a>
		<ul>
			<li><a href="#">SqlServer</a></li>
			<li><a href="#">Oracle</a></li>
			<li><a href="#">MySql</a></li>
			<li><a href="#">其它数据库</a></li>
		</ul>
	</li>
	<!--第八个菜单结束-->
	
	<li>
		<a href="#">操作系统</a>
		<ul>
			<li><a href="#">Windows 7</a></li>
			<li><a href="#">Windows Server</a></li>
			<li><a href="#">Linux</a></li>
		</ul>
	</li>
	<!--第九个菜单结束-->
	
	<li>
		<a href="#">其它分类</a>
		<ul>
			<li><a href="#">非技术区</a></li>
			<li><a href="#">软件测试</a></li>
			<li><a href="#">代码与软件发布</a></li>
			<li><a href="#">计算机图形学</a></li>
			<li><a href="#">Google开发</a></li>
			<li><a href="#">程序人生</a></li>
			<li><a href="#">求职面试</a></li>
			<li><a href="#">读书区</a></li>
			<li><a href="#">转载区</a></li>
			<li><a href="#">Windows CE</a></li>
			<li><a href="#">翻译区</a></li>
			<li><a href="#">开源研究</a></li>
			<li><a href="#">Flex</a></li>
			<li><a href="#">云计算</a></li>
			<li><a href="#">其它技术区</a></li>
		</ul>
	</li>
	<!--第十个菜单结束-->
</ul>
</body>
</html>

效果就如上图所示。

只要按照前面那六步样式设置 肯定没错，后来我看到导航菜单和下拉菜单的边框线重合了有点粗，就加了那两个样式，大家可以不加，效果照样有的。