模仿博客园首页写的一个导航菜单。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用Css模仿博客园首页写的一个导航菜单</title>

<style type="text/css">	
	ul{
		margin:0px;
		padding:0px;
		list-style:none;
		width:150px;
	}
	
	ul li{
		position:relative;
	}
	
	li ul{
		position:absolute;
		left:149px;	/*无序列表项宽150px 边框又宽1px 所以右边浮动的菜单要距左边149px*/
		top:0px;/*如果不设置此属性 弹出来的菜单总是 '矮人一等'*/
		display:none;
	}
	
	ul li a{
		display:block;
		font-size:14px;
		border:1px solid #FF0033;
		text-align:center;
		text-decoration:none;
	}
	
	ul li a:hover{
		background:#999999;	/*鼠标悬停在超链接上改变其背景色*/
		color:#FFFFFF;
	}
	li:hover ul{
		display:block;	/*鼠标移动到超链接上显示其对应的子菜单*/
	}
</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>

效果图如上所示。 用Css+ul 无序列表写的很实在 很好用。 哈哈哈