实现思路：
菜单包含在一个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>
本文转自cnn23711151CTO博客，原文链接：http://blog.51cto.com/cnn237111/959338 ，如需转载请自行联系原作者
