不多说，直接贴代码哈！有疑问，可追加评论哈！
demo.html:
<!DOCTYPE html>
<html>
<head>
<title>分类导航菜单</title>
<meta charset="utf-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link href="css/demo.css" rel="stylesheet" text="text/css"/>
</head>
<body>
<nav>
<ul>
<li></li>
<li><a href="#">新闻热点</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="#">商务合作</a></li>
<li><a href="#">教育培训</a></li>
<li><a href="#">创业专区</a></li>
</ul>
</nav>
</body>
</html>
demo.css:
@CHARSET "UTF-8";
*{padding:0;margin:0;}
nav{border:1px solid #BCFF1D;font-size:12px;background:#D6FF8C url(../images/background.gif)
no-repeat top left;float:left;height:128px;}
nav ul{list-style:none;312px;margin:2px;}
nav ul li{104px;float:left;height:45px;text-align:center;line-height:35px;}
nav ul li a{background:url(../images/menu.gif) no-repeat;display:block;text-decoration:none;color:black;padding-left:18px;}
nav ul li a:hover,nav ul li a:active{background-position:0px -55px;color:#ff3300;font-weight:bold;}
Effect picture：
