简单的二级导航页面（纯css实现，运用display属性hover）

html代码

<div class="menu">    
 <ul>    
   <li><a href="#" class="bccolor">首页a>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="#">最新资讯a>li>    
      <li><a href="#">行业新闻a>li>    
      <li><a href="#">公司公告a>li>    
    ul>    
  li>    
  <li><a href="#">联系我们a>li>    
 ul>    
div> 

css代码

body{margin:0px;padding:0px;}    
ul;li{list-style:none;}    
a{display:block;}    
a:link,a:visited{text-decoration: none;color:#000000;}    
.menu{margin:0px auto;width:600px;height:30px;}    
.menu ul{margin:0px;padding:0px;}    
.menu ul li{position:relative;float:left;list-style:none;    
    font-size:14px;width:100px;text-align: center;line-height:30px;    
    margin-right:1px;background:#999999; } 
.menu ul li .bccolor{color:red; font-weight:bold;}
.menu ul li ul{display:none;} 
.menu ul li ul li{margin-top:1px}
.menu ul li:hover{background:red;}
.menu ul li a:hover{color:#fff;}
.menu ul li:hover ul{display:block;position: absolute; left: 0px; top: 30px;}

效果图：