利用css制作导航栏样式

html

<div class="nav">
	<div class="clear"></div>
	<ul id="nav_click">
	<li class="li1"><a href="/" ><h3>秦岳首页</h3><span>HOME</span></a></li>
	<li ><a href="/professional/" ><h3>业务领域</h3><span>BUSINESS</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/professional/professional1/" >交通事故</a></div>
	<div class="li_lm"><a href="/professional/professional2/" >工伤赔偿</a></div>
	<div class="li_lm"><a href="/professional/professiona3/" >债务合同</a></div>
	<div class="li_lm"><a href="/professional/04/" >婚姻家庭</a></div>
	<div class="li_lm"><a href="/professional/05/" >房产纠纷</a></div>
	<div class="li_lm"><a href="/professional/06/" >刑事辩护</a></div>
	<div class="li_lm"><a href="/professional/07/" >劳动争议</a></div>
	<div class="li_lm"><a href="/professional/08/" >物业纠纷</a></div>
	<div class="li_lm"><a href="/professional/09/" >法律顾问</a></div>
	<div class="li_lm"><a href="/professional/10/" >知识产权</a></div>
	</div>
	</li>
	<li><a href="/team/"><h3>秦岳团队</h3><span>ITEM</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/team/" >金牌律师</a></div>
	</div>
	</li>
	<li><a href="/susonganli/0/"><h3>诉讼案例</h3><span>CASE</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/susonganli/0/" >刑事辩护</a></div>
	<div class="li_lm"><a href="/susonganli/1/" >合同纠纷</a></div>
	<div class="li_lm"><a href="/susonganli/2/" >离婚诉讼</a></div>
	<div class="li_lm"><a href="/susonganli/3/" >交通事故</a></div>
	<div class="li_lm"><a href="/susonganli/4/" >毒品犯罪</a></div>
	<div class="li_lm"><a href="/susonganli/5/" >财产纠纷</a></div>
	<div class="li_lm"><a href="/susonganli/6/" >损害赔偿</a></div>
	<div class="li_lm"><a href="/susonganli/7/" >房产债权</a></div>
	<div class="li_lm"><a href="/susonganli/8/" >债权债务</a></div>
	</div>
	</li>
	<li><a href="/lvshilianmeng/"><h3>联盟律师</h3><span>UNION</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/lvshilianmeng/" >联盟律师</a></div> </div>
	</li>
	<li><a href="/qinyuexinwen/" ><h3>秦岳新闻</h3><span>NEWS</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/qinyuexinwen/" >新闻中心</a></div> </div>
	</li>
	<li><a href="/dangjiangongzuo/" >
	<h3>党建工作</h3><span>PARTY</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/dangjiangongzuo/" >党建工作</a></div>
	</div>
	</li>
	<li><a href="/guanyuwomen/" >
	<h3>关于我们</h3><span>ABOUT</span></a>
	<div id="sub_section">
	<div style=" height:20px; background:#fff; margin-top:4px;"></div>
	<div class="li_lm"><a href="/guanyuwomen/" >品牌介绍</a></div>
	<div class="li_lm"><a href="/guanyuwomen/" >泰岳风采</a></div>
	<div class="li_lm"><a href="/guanyuwomen/" >泰岳文化</a></div>
	<div class="li_lm"><a href="/guanyuwomen/" >合作客户</a></div>
	<div class="li_lm"><a href="/guanyuwomen/" >联系我们</a></div>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</div>

css 样式

#header{width:100%; height:2px; background:#5a9eff;}

#head{width:100%; height:96px; background:#fff;}

#head .content{ width:1200px; margin:0 auto;}

#head .content .logo{ margin-top:16px; float:left; width:366px; position:relative;}

#head .content .logo .select_input{position:absolute; right:54px; bottom:0px;}

#head .content .nav{float:right; width:800px;}

#head .content .nav ul li{ width:90px;height:96px; text-align:center;position:relative;float: left;}

#head .content .nav ul li a{ display:block;height:96px;}

#head .content .nav ul li h3{ font-weight:500; font-size:16px; color:#000; font-family:'微软雅黑'; margin-top:26px;}

#head .content .nav ul li span{  font-size:12px; color:#000; font-family:Arial; line-height:24px;}

#head .content .nav ul  li:hover{ color:#a30202;}

#head .content .nav ul  li:hover h3{ color:#a30202;}

#head .content .nav ul  li:hover span{ color:#a30202; }

#head .content .nav ul  .li1 h3{color:#a30202;}
#head .content .nav ul  .li1 span{color:#a30202;}
#head .content .nav ul li #sub_section{ position:relative; background:#a30202; z-index:990; left:0; width:102px; top:-50px;  font-family:"微软雅黑"; font-size:15px; display:none; }

#head .content .nav ul li #sub_section .li_lm{ border-bottom:1px solid #fff;line-height:32px; height:32px;}

#head .content .nav ul li #sub_section .li_lm a{ margin-top:0; color:#fff;font-weight:normal;}

#head .content .nav ul li:hover #sub_section .li_lm a{ color:#fff;}

#head .content .nav ul li #sub_section .li_lm:hover a{color:#fff;}

#head .content .nav ul li:hover #sub_section{display:block;}

效果请查看 http://www.sxqylawyer.cn/index.html 首页导航栏样式