变换菜单制作（css）

来源：互联网发布：新开淘宝店物流编辑：程序博客网时间：2024/06/05 15:19

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换菜单制作</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
width: 1000px;
margin: 0 auto;
border-bottom: 5px solid #DC4E1B;
text-align: center;
}
ul li{
display: inline-block;
width: 150px;
line-height: 20px;
/*border: 1px solid #ccc;*/
/*padding: 10px 0;*/
text-align: center;
background-color: #ccc;
}
ul li span{
display: none;
}
ul li:hover span{
display: block;
background-color: #DC4E1B;
/*width: 150px;*/
/*padding: 10px 0;*/
}
li:hover{
margin-top:-20px;
}
</style>
</head>
<body>
<ul id="banner">
<li>首页home</li>
<li>新闻资讯news</li>
<li>产品展示products</li>
<li>售货服务service</li>
<li>联系我们contact</li>
</ul>
</body>

</html>

1、要呈现这样的样式，则ul应该紧靠浏览器上边栏，同时设置li的line-height: 20px;这样才能通过margin-top:-20px;将上面的中文列表进行隐藏（其实就是将中文列表框进行上移）

2、li:hover span设置要改变的样式

3、清除浮动

overflow：这个属性定义溢出元素内容区的内容会如何处理。visible     默认值。内容不会被修剪，会呈现在元素框之外。hidden     内容会被修剪，并且其余内容是不可见的。scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。inherit     规定应该从父元素继承 overflow 属性的值。auto     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。并不会在该元素上清除浮动，它将清除自己。意思就是说应用了overflow：auto；的元素，将会扩展到它需要的大小，以便包含它里面浮动的元素

0 0