24小时联系电话:15828505243

鼠标指向有背景的CSS导航菜单

鼠标指向有背景的CSS导航菜单怎么做了,我们很多时候会看到很多网站导航的都是有背景,但是当鼠标移动上后会出现一个新的颜色变化,怎么做了,今天小朗做了一个分享下吧,可以直接复制代码,也可以自己写哦!

首先:我们需要一个可以编写网页的一个工具,比如notepad++、DW、记事本、sublime text 等工具,这样的工具可以在网上找,会有很多类似的工具。然后:你直接复制下面的源码就可以了。


<!--这里是html标签代码-->
<div class="nav">
  <ul>
    <li class="active"><a href="http://www.oldxiansfood.com">朗沃首页</a></li>
    <li><a href="http://www.oldxiansfood.com/about">关于朗沃</a></li>
    <li><a href="http://www.oldxiansfood.com/our">联系朗沃</a></li>
    <li><a href="http://www.oldxiansfood.com/news">朗沃新闻</a></li>
    <li><a href="http://www.oldxiansfood.com/course">朗沃课程</a></li>
  </ul>
</div>
<!--这里是CSS-->
<style>
*{ margin:0; padding:0;}
a{ text-decoration:none;}
.nav{ width:600px; height:45px; margin:50px auto; background-color:#0093dd;}
.nav ul{ width:600px; height:45px;}
.nav ul li{ list-style-type:none; width:120px; height:45px; float:left;}
.nav ul li a{ width:120px; height:45px; display:block; text-align:center; line-height:45px;}
.nav ul li a:hover,.active{ background-color:#FFAA31;}
</style>

直接复制上面的源码,然后到你的网站的和中就可以看到下面的效果吧。
鼠标指向有背景的CSS导航菜单