大气/蓝色底边、带箭头的导航菜单

答案：<!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=utf-8" />
<title>实用菜单</title>
<script type="text/javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script>
<style type="text/css">
body
{
	margin:0; padding:0; font-size:12px; font-family:"微软雅黑";
}
a:link {
	color:#3f3f3f; text-decoration: none;
}
a:visited {
	text-decoration:none; color: #3f3f3f;
}
a:hover {
	text-decoration:none; color: #f46662;
}
a:active {
	text-decoration: none; color:#f46662;
}
#main
{
	width:100%; background-color:#fafafa; border-top:#d1d1d1 1px solid; margin-top:100px; border-bottom:#32a1e3 4px solid; overflow:hidden;
}
#menu
{
	width:900px; margin:0 auto;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a;  border-right:#bfbfbf 1px dotted;  padding:10px; padding-top:13px; cursor:pointer; background-repeat:no-repeat; background-position:10px 12px;
}

</style>
<script type="text/javascript">
$(function(){

$(".m1").mouseover(function(){
	$(this).css("background-image","url('/jscss/demoimg/201208/bg.png')");
}
).mouseout(function(){
$(this).css("background-image","none");
});
});
</script>
</head>
<body>
<div id="main">
<div id="menu">
<span class="m1" style="border-left:#bfbfbf 1px dotted; "><a href="#" target="_blank">论坛首页</a></span>
<span class="m1"><a href="#" target="_blank">学生工作</a></span>
<span class="m1"><a href="#" target="_blank">师资队伍</a></span>
<span class="m1"><a href="#" target="_blank">学科专业</a></span>
<span class="m1"><a href="#" target="_blank">教学改革</a></span>
<span class="m1"><a href="#" target="_blank">党建工作</a></span>
<span class="m1"><a href="#" target="_blank">联系我们</a></span>
</div></div>
</body>
</html>
上一个：CSS ui制作导航菜单
下一个：仿爱微网两级导航菜单
更多图片编程知识: