<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<style>
menu{ height:40px; line-height:40px; background:#00F; width:100%; padding:0; margin:0}
menu li{ float:left; width:200px; list-style:none; font-size:14px; text-align:center; color:#fff; height:100%;}
menu li a{ color:#fff; text-decoration:none}
menu licur,menu li:hover{ background:#000;}
nav{ height:40px; line-height:40px; background:#00F; width:100%; padding:0; margin:0; margin-top:40px;}
nav li{ float:left; width:200px; list-style:none; font-size:14px; text-align:center; color:#fff; height:100%;}
nav li a{ color:#fff; text-decoration:none}
nav licur,nav li:hover{ background:#000; height:60px; line-height:60px; margin-top:-10px;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li class="cur"><a href="#">网站首页</a></li>
<li><a href="#">校园首页</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
</div>
<!--一般情况下，我们都是通过行高line-height来设置文字的居中的，两个不同的方式，你看一是哪个是你要的(深圳网站建设>
是不是你css写错了或者写的不规范，我做了个例子，并没有你所说的情况出现，效果如下图
html：
<div class="demo"><ul class="list">
<li class="list1"></li>
<li class="list2"></li>
</ul>
</div>
css：
{margin: 0;padding: 0;}demo{width: 300px;height: 600px;border: 10px solid #ddd;margin: 30px auto;}
list{list-style: none;width: 100%;height: 100%;}
list li{height: 50%;}
list1{background: #23b7e5;}
list2{background: #f0ad4e;}可以试试给nav li 加上样式overflow:hidden或者zoom:1触发haslayout
不过既然指定了line-height:50px;不如把height也设为50pxul定位为position：absolute，bottopm：0px，height：auto
ul上层的div为position：relative，高度比ul 略高（高出鼠标悬停时li的高度增加量）。
剩下的就是li鼠标悬停时高度变高。
呃，简单的实现了一下，有问题hi联系。。。
<style>
{
padding:0px;
margin:0px;
}
#nav{
height:120px;
width:100px;
position:relative;
}
#nav ul{
position:absolute;
bottom:0px;
left:0px;
width:100px;
}
#nav ul li{
height:20px;
line-height:20px;
text-align:center;
list-style:none;
background:#F00;
border-top:1px solid #fff;
}
#nav ul li:hover{
height:30px;
line-height:30px;
}
</style>
<div id="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</div>当li设置float:left;的时候，它的父元素就不会随着li的增多自适应高度(主要是FF等浏览器)，所以，如果父元素有背景的话是不会随着li的高度增加而出现的。
这个时候可以给父元素加1个属性，overflow:hidden; [责任编辑：jumbot]
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，一个新建html文件，例如：indexhtml，填充问题基础代码。
2、其次，在indexhtml中的<style>标签中，输入css样式代码：li{padding-top: 49px;}。
3、浏览器运行indexhtml页面，此时通过css将li标签的行距调整为了49px。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）