如何控制css样式使鼠标经过后导航变高

1、新建一个文本文档，我们写入以下内容代码。<ul class="nav"> <li><a class="on媪青怍牙" href="#">首　　页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>

2、我们在css中添加以下样式<style type="text/css">*{margin:0; padding:0; font-size:14px稆糨孝汶;}a{color:#333;text-decoration:none}.nav{list-style:none; height:30px; border-bottom:200px solid #F60; margin-top:30px; padding-left:50px;}.nav li{float:left}.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; margin-left:1px;background:#0F0;}.nav li a.on, .nav li a:hover{ color:#fff;background:#F00;}</style>

3、下面我们更改一些样式，让鼠标经过时，颜色进行改变，同时高度变为40像素，我们在css中加入以下属性就可以了，background:#F00;height:40px;margin-top:-10px;line-height:40px;

4、我们看下设置后的效果。在浏览器和dw的设计当中都可以查看。

5、下面我们梳理几个比较重要的知识点。首先line-height属性，这个样式我们在设置字体间距和在导航中是经常遇到的。

6、margin-top属性，设置外边距的最简单的方法就是使用 margin 属性。我们参考下w3c的资料