CSS伪类的又一个小应用，实现下拉菜单

最新推荐文章于 2024-10-04 06:11:34 发布

weixin_34387284

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量179

点赞数 2

文章标签： xhtml

本文链接：https://blog.csdn.net/weixin_34387284/article/details/85079930

版权

实现思路：

菜单包含在一个div中，div的高度为30px，菜单长度为120px。设置div的overflow为hidden。

这样菜单的剩余90px的内容被隐藏了。

当hover的时候，把div的overflow值设为visible。这样，剩余的90px内容就可见。

演示代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tdiv
{
width: 100px;
height: 30px;
overflow: hidden;
text-align: center;
background: red;
}
.tdiv:hover
{
overflow: visible;
}
</style>
</head>
<body>
<div class="tdiv">
<div style="width: 100px; height: 30px; background: green; text-align: center;">
Menu1</div>
<div style="width: 100px; height: 30px; background: green; text-align: center;">
Menu2</div>
<div style="width: 100px; height: 30px; background: green; text-align: center;">
Menu3</div>
<div style="width: 100px; height: 30px; background: green; text-align: center;">
Menu4</div>
</div>
</body>
</html>