CSS 导航栏

<style type="text/css">
    body,ul,div,li
    { margin:0; padding:0px;
     }
     
    #dhl
    {    width:960px;
         height:35px;
      background:#ccc;
      margin:40px auto 0;
      line-height:35px;
     }
    
    #dhl ul li
    { float:left;
      
     }
     #dhl a
     {
      display:block;
      font-size:12px;
      color:#000;
      text-decoration:none;
      padding:0px 10px;
      float:left;
      }
    
    #dhl a:active,  #dhl a:hover
    {
     font-size:13px;
     color:#fff;
     text-decoration:underline;
     background:#000;
     }
    #dhl .navActive
    {
      background:#000;
     color:#fff;}

    </style>

——————————————————————————————————————

<div>
        <div id="dhl">
            <ul>
                <li><a href="#" class="navActive">首页导航</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>
        </div>
    </div>