纯CSS实现二级导航下拉菜单--css的简单应用

最新推荐文章于 2020-09-01 14:05:03 发布
最新推荐文章于 2020-09-01 14:05:03 发布
阅读量1.9w 收藏 59
点赞数 16
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaiyq/article/details/81479613
版权

思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。

1、纯CSS二级导航下拉菜单代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>纯css二级导航下拉菜单</title>
    <meta name="keyword" content="关键字">
    <meta name="description" content="描述">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #bg{background: red;width: 100%;height: 35px;}
        nav{height: 35px;width: 1000px;margin: 0 auto;}
        nav ul li{list-style-type:none;float: left}
        nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;
                    color:white;font-fimily:微软雅黑;}
        nav ul li ul li{float: none}
        nav ul li ul li a{color:black}
        nav ul li ul{display: none;}
        nav ul li:hover ul{display: block;}
    </style>
</head>
<body>
<div id="bg">
<nav>
    <ul>
        <li><a href="#">一级导航</a>
        <ul>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
        </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>
</body>
</html>

2、运行效果:

http://files.cnblogs.com/files/qikeyishu/%E7%BA%AFCSS%E5%AE%9E%E7%8E%B0%E4%BA%8C%E7%BA%A7%E5%AF%BC%E8%88%AA%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.zip

雾都程序猿
关注
初级基础HTML CSS实现二级下拉菜单
weixin_67318211的博客
04-21 6292
我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过HTML和CSS来实现它呢？ 1.HTML部分 HTML整体部分较为简单，看到这个结构，我们可以首先想到的是运用ul列表标签和a标签来整体实现。话不多说，代码如下： <header> <ul> <li> <a href="#">英雄介绍</a> .
css二级导航栏下拉动画
最新发布
shaojiashun的博客
06-18 265
【代码】css二级导航栏下拉动画。
纯CSS实现二级导航下拉菜单
05-06
纯css实现二级导航下拉菜单，在一级导航的基础上建二级导航。不使用JavaScript，使用纯css来实现。
纯css实现二级下拉菜单
web前端博客
04-05 2343
听说很多小白菜鸟还不会做二级菜单，小编简单教大家怎么用纯css实现二级下拉菜单。 实现的原理很简单，就是用display和hover就行了。 纯css实现导航下拉菜单 a{color: white;text-decoration: none;} nav li{display:block;float: left;width: 15
用CSS实现二级菜单
liusongyu123的博客
09-01 2412
之前做案例时，在二级菜单那里卡了很长时间，现整理出来，共享一下 首先无论做三级菜单还是二级菜单时，第一步的思路就是把所有的菜单都显示出来，然后再去做相关的隐藏的操作； 那么二级菜单又分是，竖着排还是横着排两种，先说第一种竖着排。 二级菜单竖着排，是把二级菜单写入一级菜单的li里面，这样，二级菜单的宽就是一级菜单li的宽，之后的二级菜单里面的li元素会自动被挤到下面去，从而显示竖直排列的效果。...
CSS技巧分享：如何用css制作横排二级下拉菜单
u012702553的博客
06-28 3148
导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。
纯CSS制作二级导航下拉列表
04-30
至此，一个基本的纯CSS二级导航下拉列表就完成了。你可以根据自己的需求调整颜色、大小、过渡效果等样式。这个方法的好处是代码简洁，易于理解和维护，同时也兼容各种现代浏览器。 需要注意的是，虽然这种方法在...
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
总之，结合jQuery的事件处理和CSS的样式控制，我们可以实现一个美观且实用的横向二级下拉菜单。这种技术在网页设计中非常常见，能够提升用户体验，使用户更容易导航到网站的各个部分。对于前端开发者来说，理解和...
纯CSS实现超简单的二级下拉导航菜单代码
09-25
本文所要探讨的是如何仅使用CSS技术来实现一个纯CSS的二级下拉导航菜单代码。 ### 知识点解析 #### 1. 纯CSS导航菜单的优势 纯CSS菜单的优势在于其轻量级和易维护性。通过仅用CSS技术实现的菜单，不需要依赖...
纯css 二级下拉菜单
树欲静而风不止
04-11 539
编程语言 .net java php c++ 国家语言 普通话 英语 法语 乐器 吉他 钢琴 古筝 二弦 编程职业 前端开发 后台开发 android开发 测试员 销售 熟练程度 一般 熟练 精通 #menu,#menu1,#menu2,#menu3,#menu4{ display:inline-block; position:relative; }
CSS3横向导航下拉菜单代码.zip
07-04
CSS3横向导航下拉菜单代码是一款红色样式风格的网站导航，鼠标经过的时候下拉显示二级菜单。
前端初学者二级导航(超简单的例子)
08-02
超简单的一些前端学习例子，比如简易轮播图，简易二级导航等，有一两个例子因为懒所以没写完，美化也没做，只是一些原理性的东西而已
二级菜单简单切换
07-29
几个月前初学前端时挖的坑，把二级菜单设计得和一级菜单在DOM结构上没啥关系，导致想要鼠标悬浮一级菜单即可显示该一级菜单对应的二级菜单，移出则显示当前页所在一级菜单所对应的二级菜单列表不好用CSS实现，现在用定时器实现了下该功能，本人初学前端，写得不好还勿见怪，只是提供个参考。本地测试出现过bug，两个一级菜单对应的二级菜单同时出现了，但不好复现，如果有高手能帮忙解决，不胜感激。
css3动画_二级下拉菜单
08-10
用css3 动画，渐变写的网页二级下拉菜单，无js，无图片，网页只有8k
利用css制作二级下拉菜单
何淑女的博客
10-26 1445
利用css制作二级下拉菜单 一目了然、通俗易懂——利用css制作二级下拉菜单
纯CSS3实现宽屏二级下拉菜单
weixin_30588907的博客
12-05 159
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10070767.html
简单二级菜单，JS+CSS实现。
weixin_34362790的博客
10-18 112
HTML代码： <body> <div id="top"> <div id="menuout"><div id="menuin"><div id="menu"><ul id="nav"> <li><a href="#" name="navmenu" class="navon"><spa...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值