简单的导航栏效果

鼠标移动上去会变颜色

           <style>

*{margin: 0 auto;padding: 0;}
#website{width: 100%;height: 60px;background: url(img/20180327152149.jpg);}
#website>ul{list-style: none;color: white;width: 1130px;}
#website>ul>li{width: 130px;height: 50px;float: left;text-align: center;line-height: 22px;padding-top: 10px;}
#website>ul>li:hover{background: #8B0000;}
</style>
<div id="website">
<ul>
<li>网站首页<br/>home</li>
<li>公司简介<br/>about us</li>
<li>产品展示<br/>products</li>
<li>成功案例<br/>case</li>
<li>核心优势<br/>core advantage</li>
<li>新闻资讯<br/>news</li>
<li>联系我们<br/>contrct</li>
<li>留言<br/>message</li>
</ul>

</div>