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

实现思路：

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

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

用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
微信小程序实现下拉菜单效果
问题下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件.下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择,等等.提供下拉菜单的目的是帮助用 ...
C语言下拉式菜单做出字体小,C语言下拉菜单设计-带源代码.ppt
<C语言下拉菜单设计-带源代码.ppt>由会员分享,可在线阅读,更多相关<C语言下拉菜单设计-带源代码.ppt(30页珍藏版)>请在人人文库网上搜索. 1.C语言下拉菜单程序设 ...
css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
小程序 picker下拉菜单实现
展示样式页面代码 wxml: js: data: {batchArr: [{ID: 1, ACTIVITYBATCH: "嗨购节" }, {ID: 2, ACTIVITYBATC ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗？
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...

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

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

最新文章

热门文章