思路：

1. 首先用HTMl定义一套列表机制，该列表机制均由a标签控制，如下：
   

 <div id="menu">
    <ul id="list">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">HTML</a>
        </li>
        <li>
            <a href="#">CSS</a>
        </li>
        <li>
            <a href="#">JavaScript</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
        <li>
            <a href="#">帮助</a>
        </li>
    </ul>
</div>

2. 使用CSS样式放置在一行
   

list-style-type: none;：去掉圆点
width: 100px;：宽度
height: 50px;：高度
line-height: 50px;：行高
background-color:beige;：背景色
text-align: center;：文本居中
float: left;：整一行上
text-decoration: none;：去掉下划线

3. 让导航栏动起来
   

    <style>
        #list li {
      
      
            list-style-type: none;
            width: 100px;
            height: 50px;
            line-height: 50px;
            /*background-color: beige;*/
            text-align: center;
            float: left;
        }
        #list li:hover{
      
      
            background-color: red;
        }
        #list li a {
      
      
            text-decoration: none;
        }
        #menu{
      
      
            width: 700px;
            height: 50px;
            background-color: beige;
            margin: 0 auto;
        }
    </style>

 创作不易，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)