下拉菜单

最新推荐文章于 2019-02-18 17:43:47 发布
最新推荐文章于 2019-02-18 17:43:47 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42388503/article/details/80752552
版权


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            /*position: relative;*/
        }
        .drop-down-content{
            padding: 0;
            display: none;
            /*position: absolute;*/
        }
        
        h3{
            font-size: 30px;
            clear: both;
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover .drop-down-content{
            display: block;
        }
</style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">下拉菜单</a></li>
        <li class="drop-down"><a href="#">下拉菜单</a>
            <ul class="drop-down-content">
                <li><a href="#">我是1</a></li>
                <li><a href="#">我是2</a></li>
                <li><a href="#">我是3</a></li>
            </ul>
            </li>
        <li><a href="#">下拉菜单</a></li>
        <li><a href="#">下拉菜单</a></li>
        <li><a href="#">下拉菜单</a></li>
    </ul>
    <h3>我是测试文字</h3>
</body>

</html>


<style>
        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            /*position: relative;*/
            height: 50px;
            overflow: hidden;
        }
        .drop-down-content{
            padding: 0;
            /*position: absolute;*/
        }
        
        h3{
            font-size: 30px;
            clear: both;
/*            position: relative;
            z-index: -1;*/
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover{
            overflow: visible;
        }

</style>

<style>

        ul{
            list-style: none;
        }
        .nav>li{
            float: left;
        }
        ul a{
            display: block;
            text-decoration: none;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: #2f3e45;
        }
        .nav>li:first-child a{
            border-radius: 10px 0 0 10px;
        }
        .nav>li:last-child a{
            border-radius: 0 10px 10px 0;
        }
        .drop-down{
            /*position: relative;*/
            height: 50px;
        }
        .drop-down-content{
            padding: 0;
            opacity: 0.3;
            height: 0;
            overflow: hidden;
            transition: all 1s ease;
            /*position: absolute;*/
        }
        
        h3{
            font-size: 30px;
            clear: both;
/*            position: relative;
            z-index: -1;*/
        }
        .drop-down-content li:hover a{
            background-color:red;
        }
        .nav .drop-down:hover .drop-down-content{
            opacity: 1;
            height: 150px;
        }
桃之夭夭、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt界面添加菜单，工具栏以及状态栏
sinat_35523212的博客
08-28 7万+
原文: http://qzher.com/?p=592 Qt和MFC在架构上有些不一样 MFC基本上就是单文档结构/多文档结构，以及基于对话框应用程序 而Qt就是Widgets，以及Quick应用程序。而且这两种应用程序，都可以直接通过新建一个空的qmake应用程序menuToolbarStatusBar，再添加cpp，ui或qml，都能达到自己想要的要求 而
菜单
神zhi殇的博客
07-13 199
然后真实的菜单： pages.component中调用菜单接口；menus传递给ba-menu； ngOnInit() { setTimeout(() => { console.log('传递到ba-menu的meuns----2：', this.menus); // 是正确的值； }, 1000); console.log('传递到ba...
Qt学习（3）——菜单栏和工具栏
momochen的博客
09-16 1万+
目录    0、创建项目： 1、菜单栏 2、工具栏 3、状态栏 4、核心控件 5、浮动窗口 附上完整代码（只改变mainWindow.cpp）  0、创建项目： 前面步骤一样，到下图基类换一下： 1、菜单栏 头文件： 一些函数原型声明: void addDockWidget(Qt::DockWidgetArea area, QDockWidget *doc...
MFC中的CMenu---如何动态添加菜单/菜单项、子菜单、右键菜单
liqing19850102的专栏
04-17 4万+
如何动态添加菜单/菜单项、子菜单、右键菜单 有关菜单的操作主要用到CMenu类，当然也可用相应API函数，CMenu类只是MFC对API中操作菜单的函数的封装而已。 不过能用类就尽量用类，类的组织方式好呗，代码看着也舒服。 若是SDK编程，那就用API吧 。      CMenu menuMain,menu1; //首先 定义CMenu对象 一、 创建菜单，有两种方法 1. 用LoadMe
删除Windows右键菜单不必要功能
热门推荐
Mephisto180502的博客
09-18 5万+
随着软件安装的越来越多，一些软件擅自修改右键菜单，对于这些用不到的，我们要把它删除。 步骤： 一、点击左下角“开始”菜单 二、点击“运行”打开运行窗口 三、输入“regedit”后点击“确定”按钮打开注册表 四、依次展开HKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers 在Context MenuHandlers展开项中找到要...
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
08-31
在使用Bootstrap构建网页时，下拉菜单是一种常见的交互元素，它允许用户在单个按钮下访问多个选项。然而，有时可能会遇到下拉菜单点击后无法显示的问题，这通常是由于JavaScript库加载顺序错误导致的。本篇文章将...
Bootstrap实现下拉菜单效果
09-02
下拉菜单是 Bootstrap 中常用的一个组件，它提供了一种简洁的方式来展示链接列表，通常用于导航栏或者设置菜单中。本文将详细介绍如何使用 Bootstrap 实现下拉菜单效果。 1. **基础结构** 创建一个下拉菜单，你...
jQuery 渐变下拉菜单
10-29
jQuery 渐变下拉菜单是一种常见的网页交互效果，用于创建美观且用户体验友好的导航菜单。这种效果通过结合CSS样式和jQuery JavaScript库来实现，使得用户鼠标悬停在菜单项上时，下拉子菜单以渐变的方式展开或收起。 ...
css实现下拉菜单
weixin_30867015的博客
12-06 50
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none; } ...
下拉导航菜单，使用非常简单
未来很长，但我会努力的走下去。
11-27 2126
LQRDropdownLayoutLibrary 项目地址：GitLqr/LQRDropdownLayoutLibrary  简介：下拉导航菜单，使用非常简单 更多：作者   提 Bug    标签：   下拉导航菜单，使用非常简单 LQRDropdownLayout 该项目是下拉导航菜单，使用非常简单。基于 FilterDropDownMenu-master 项目进行封装，因为原...
layui 生成动态左侧菜单 递归实现
人的生命周期还还没有代码的生命周期精彩
02-18 1万+
我知道两种方式实现： 一、先加载所有的主菜单，之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过，那么动态添加了菜单，这里显示不出来,不判断的话，每次点击都会请求一次，这样请求的次数就太多了，服务器不太好的话可能会成为高并发的一个原因) 二、就是以下的了，使用递归一次性全部加载出来（缺点,耗费服务器内存） 如果动态添加一个菜单，你当前页面不手动刷新菜单不会显示，这个问题可以...
Android Menu用法全面讲解
CodingEnding的博客
11-23 2万+
菜单（Menu）是Android应用中非常重要且常见的组成部分，主要可以分为三类：选项菜单、上下文菜单/上下文操作模式以及弹出菜单。本文只介绍Android3.0及以上的Menu知识点。
win10右键删除多余菜单
mxiawang的博客
12-26 3万+
1.按下电脑键盘的WIN+R键，调用出运行命令对话框，输入regedit，点击确定或按下回车键。 2.进入到注册表编辑器后，输入路径计算机\HKEY_CLASSES_ROOT*\shellex\ContextMenuHandlers\WorkFolders；该文件夹下的内容均为文件右键显示的菜单内容，有些是英文，不过基本都能认清楚，可以选择性的删除一些。 ...
HTML5菜单栏特效
hzp666的博客
11-16 1万+
 今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧。 1、CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角
网页特效之下拉菜单
初阶农民工的博客
09-04 5107
思路： 通过:hover伪类或onmouseenter事件在鼠标经过时改变二级菜单的display 关键知识：:hover伪类/onmouseenter 1.纯静态版 具体代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&amp
下拉菜单的四种实现方式
F-ZERO-F的博客
08-06 2万+
今日在做下拉菜单时思考实现下拉菜单的几种实现方式，现在对这几种实现方式进行总结。 1：改变下拉菜单的display /*HTML结构*/ &amp;lt;div id=&quot;container&quot;&amp;gt; &amp;lt;ul id=&quot;con_ul&quot; class=&quot;cleanfix&quot;&amp;gt; &amp;lt;li
几种实现悬浮下拉菜单的方式
老刘的日志博客
05-10 1万+
首先是HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body><div id="nav" class="nav
[038] 微信公众帐号开发教程第14篇-自定义菜单的创建及菜单事件响应
923723914
08-09 1028
微信5.0发布 2013年8月5日，伴随着微信5.0 iPhone版的发布，公众平台也进行了重要的更新，主要包括： 1）运营主体为组织，可选择成为服务号或者订阅号； 2）服务号可以申请自定义菜单； 3）使用QQ登录的公众号，可以升级为邮箱登录； 4）使用邮箱登录的公众号，可以修改登录邮箱； 5）编辑图文消息可选填作者； 6）群发消息可以同步到腾讯微博。 其中，大家议论最多的当属...
javascript下拉菜单
最新发布
12-08
JavaScript下拉菜单是一种常用的网页交互效果，它可以让用户在点击下拉箭头后，弹出一个选项列表供用户选择。在JavaScript中实现下拉菜单通常需要使用事件处理和DOM操作。 首先，我们需要在HTML中创建一个下拉菜单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值