实现思路：
菜单包含在一个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 ，如需转载请自行联系原作者