关于纯css实现简单的下拉菜单

最新推荐文章于 2023-06-18 18:10:45 发布
最新推荐文章于 2023-06-18 18:10:45 发布
阅读量502 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/struggle1103/article/details/51337685
版权
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ul,li,a{
           margin:0;
           padding:0;
        }
        .menu > li {
            display: inline-block; /*只有块元素width和heigth属性才会起作用*/
            width: 200px;
            background-color: #ffd800;
            text-align: center;
        }


            .menu > li > a {
                text-decoration: none;
            }


        .dropdown {
            position: relative;
            display:inline-block;
        }
            .dropdown .dropdown-content {
                display:none;
                position:absolute;
                width:100%;
                overflow:hidden;
                background-color: #E65252;
            }
            .dropdown:hover .dropdown-content {
                 display:block;
            }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="dropdown">
            <a href="#" class="btn-menu">菜单一</a>
            <div class="dropdown-content">
                <ul>
                    <li><a href="#">菜单一之1</a></li>
                    <li><a href="#">菜单一之2</a></li>
                </ul>
            </div>
        </li>
        <li  class="dropdown">
            <a href="#">菜单二</a>
            <div class="dropdown-content">
                <ul>
                    <li><a href="#">菜单二之1</a></li>
                    <li><a href="#">菜单二之2</a></li>
                </ul>
            </div>
        </li>
        <li  class="dropdown">
            <a href="#">菜单三</a>
            <div class="dropdown-content">
                <ul>
                    <li><a href="#">菜单三之1</a></li>
                    <li><a href="#">菜单三之2</a></li>
                </ul>
            </div>
        </li>


    </ul>


</body>
</html>
struggleqiang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS多级下拉菜单
12-11
纯CSS多级下拉菜单,
纯css实现水平下拉导航菜单
04-07
纯CSS实现的下拉导航菜单不仅可以减少对JavaScript的依赖，还能提高网页加载速度和可访问性。本文将详细介绍如何使用CSS创建一个具有三级下拉功能的导航菜单。 首先，我们需要在HTML中构建基本的菜单结构。一个简单...
下拉菜单效果的实现方法--纯css实现
岁寒松柏
08-14 388
下拉导航的效果，实现效果有很多种效果，在这里我们使用css不用javascript实现咱们的下拉菜单效果 html代码&lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="guanyuwomen.html"&gt;传智播客&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href
收集的CSS仿经典下拉菜单
free_kyy的专栏
10-14 1057
代码：* {margin:0px;font-size:12px;background:#D4D0C8;color:#000000;}hr {color:gray;border:1px inset;}#dyMenu {width:100%;background:#D4D0C8;border:2px outset;}#dyMenu a {display:block;width:60px;display
一个用纯CSS实现的下拉菜单
weixin_30751947的博客
12-26 132
用CSS做下拉列表的特效，代码如下： <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ...
纯CSS实现下拉菜单的示例代码
09-24
纯CSS实现的下拉菜单可以避免对JavaScript的依赖，提高页面加载速度，同时简化代码结构。 首先，我们需要定义基础的HTML结构。在这个例子中，我们使用`<ul>`和`<li>`元素来创建列表，其中`<li>`元素内的第一个`<a>`...
纯CSS实现的多级下拉横向导航菜单代码
01-23
本文将深入探讨如何使用纯CSS实现一个功能完善的多级下拉横向导航菜单，这对于提升用户体验和网站可操作性至关重要。 首先，我们要理解CSS（Cascading Style Sheets）的基本原理。CSS是一种样式表语言，用于描述...
纯css实现的下拉菜单只有边框底纹用到图片
09-25
主要介绍了纯css实现的下拉菜单只有边框底纹用到图片，比较适合新手，初学者，感兴趣的朋友不要错过
下拉菜单（纯CSS完成）
weixin_34326558的博客
05-13 69
2019独角兽企业重金招聘Python工程师标准>>> ...
纯css实现下拉菜单的效果
weixin_30468137的博客
03-04 240
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS下拉菜单实例模块-www.divcss5.com</title><style>body,ul,li{background-color:white;font-size:12px;font-fam...
css下拉菜单代码（用纯css实现下拉菜单）
web前端开发博客
04-11 6505
用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。 css下拉菜单代码： <style> ul { list-style: none; margin: 0; padding: 0; } ul li a { display: block; text-decorat.
纯CSS下拉菜单
橙色卡布奇诺
06-10 591
纯css下拉菜单，二级下拉，三级下拉一样可以做，简单修改可以编程自己的代码
使用CSS实现下拉菜单的效果
weixin_34344403的博客
08-20 193
2019独角兽企业重金招聘Python工程师标准>>> ...
css下拉菜单全代码
m0_65076170的博客
11-11 819
快来看看吧
纯CSS实现下拉导航菜单代码
weixin_42645716的博客
11-05 1185
纯css实现，鼠标划过显示二级菜单。二级菜单自上至下滑入。 <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>纯CSS3-红色下拉导航菜单代码</title> <style> /*导航栏*/ .n...
CSS实现下拉菜单
u800820的专栏
12-11 424
1.CSS实现下拉菜单重点在于用一个无序列表嵌套一个无序列表，父列表的position属性设置为relative，子列表的position设置成      absolute。先将子列表隐藏起来display:none;当鼠标移到到父列表项上时，显示子列表display:block; 2.代码示例： css下拉菜单 *{ margin:0;
html创建菜单列表
行善之人必有余庆
05-15 3049
创建菜单列表 本章中介绍的列表主要包括 无序列表 有序列表 定义列表 菜单列表 目录列表 效果：
CSS基础学习--19 下拉菜单
最新发布
yyxhzdm的博客
06-18 3029
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
html下拉折叠菜单,纯CSS实现折叠菜单下拉菜单
05-27
好的，我可以为您介绍如何实现纯CSS的下拉折叠菜单。 首先，我们需要一个基础的HTML结构，如下所示： ```html 折叠菜单 下拉菜单项1 下拉菜单项2 下拉菜单项3 ``` 接下来，我们需要利用CSS来实现下拉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值