4.10.2 顶端菜单

上一节我们完成了整体结构，本节将在顶端div完成一个横向的菜单。
<div class="menu-div">
    <ul>
        <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>
但是列表默认是纵向排列的，所以我们要做下变化，思路如下：
1.所有li项目变成盒子模型，设定相同的高度和宽度以及填充
2.所有li项目左漂浮
3.设定ul为盒子元素，设定它的宽度为所有li元素宽度之和（否则放不下的话可能会转行），ul的高度应该是20vh，和head一致，否则会有空隙
做到这三步，菜单就会横向排列了。
li背景颜色、字的颜色自行决定，菜单项目内的文字也可以自行替换

鼠标悬停效果
鼠标移动到菜单项，菜单变色是通过伪类hover做到的。例如：
<style>
.menu{
    width:150px;
    height:80px;
    background:blue;
    color:#FFF;
}
.menu:hover{
    background:orange;
    color:#000;
}
</style>
<div class="menu">
    鼠标移上来试试
</div>
li元素的class值添加为menu，这样li就有上面的悬停效果了。但这样写的话所有li都要增加一个class项，有点过于繁琐，可以用下面的组合选择器的写法
<style>
.menu-div li,.menu-div a{
    width:150px;
    height:80px;
    background:blue;
    color:#FFF;
    float:left;
    line-height:65px;
    text-align:center;
    text-decoration:none;
}
li{
    list-style:none;
}
.menu-div a:hover{
    background:orange;
    color:#000;
}
</style>
<div class="menu-div">
    <ul>
        <li>足球</li>
        <li>篮球</li>
        <li>乒乓球</li>
        <li>羽毛球</li>
        <li>排球</li>
        <li>跑步</li>
    </ul>
</div>
这样写的话，html不用再修改了。
.menu-div li
的意思是class值是menu-div的元素（就是最外围的div）内部所有的li


加入链接
菜单项通常都有链接，以便点击到达另一个页面，那么上面的代码就变成这样：
<div class="menu-div">
    <ul>
        <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>
由于网址未定，所以暂时用#号代替。