纯CSS实现下拉菜单的示例代码

分类 : 代码案例

将下拉菜单的ul高度设置为0,并且超出部分隐藏掉。

设置下拉菜单的高度添加过渡效果,高度为auto时过渡效果失效。

<style> 
    ul{ 
        list-style: none; 
        margin: 0; 
        padding: 0; 
    } 
    ul li a{ 
        display: block; 
        text-decoration: none; 
        width: 100px; 
        height: 50px; 
        text-align: center; 
        line-height: 50px; 
        color: white; 
        background-color: #2f3e45; 
    } 
    .drop-down{ 
        width: 100px; 
        height: 50px; 
    } 
    .drop-down-content{ 
        opacity: 0; 
        height: 0; 
        overflow: hidden; 
        transition: all 1s ease; 
    } 
  
    p{ 
        font-size: 20px; 
        margin: 0; 
    } 
    .drop-down-content li:hover a{ 
        background-color: red; 
    } 
    .nav .drop-down:hover .drop-down-content{ 
        opacity: 1; 
        height: 150px; 
    } 
</style> 
<ulclass="nav"> 
    <liclass="drop-down"> 
        <ahref="#">下拉菜单</a> 
        <ulclass="drop-down-content"> 
            <li><ahref="#">菜单1</a></li> 
            <li><ahref="#">菜单2</a></li> 
            <li><ahref="#">菜单3</a></li> 
        </ul> 
    </li> 
</ul> 
<p>内容</p>

效果图如下:



分类: 代码案例    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

快速查看表结构 SQL server查看表注释以及字段注释表结构字段说
body的属性 body标签主要的属性小结
Webapi管理和性能测试工具WebBenchmark
方正综艺简体(fzzyjw)下载字体后如何安装,如何下载字体并安装
如何用PR批量制作字幕?
方正综艺繁体下载字体后如何安装,如何下载字体并安装
方正综艺繁体免费字体下载,方正综艺繁体字体免费下载,方正综艺繁体字体下
方正中等线繁体免费字体下载,方正中等线繁体字体免费下载
方正汉真广标简体下载字体后如何安装,如何下载字体并安装
方正中倩简体下载字体后如何安装,如何下载字体并安装

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
undefined是什么意思啊
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
sql中的modify语句,修改列属性
html5中datalist标签怎么用

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16