纯HTML+CSS实现三级下拉式导航菜单

最新推荐文章于 2024-04-21 11:00:35 发布
最新推荐文章于 2024-04-21 11:00:35 发布
阅读量9.7k 收藏 16
点赞数 4
文章标签： html css 导航菜单

直接上代码：

 <html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
<style type="text/css">
#nav{height:40px; background-color:#b6ff00;}
#nav *{margin:0;padding:0;}
#nav a{text-decoration:none;}
/*一级菜单*/
#nav ul{margin:0 auto; width: 800px; display:block;list-style-type:none;}
#nav ul li{display:block;width:120px;height:40px; line-height:40px; float:left;text-align:center;border-right:solid 1px white;}
#nav ul li:last-child{border-right:none;}
#nav ul li:hover{background-color:red;}
/*二级菜单*/
#nav ul li ul{display:none;}
#nav ul li ul li{width:120px; height:40px; line-height:40px;background-color:rgba(95, 181, 43, 0.50);border-bottom:solid 1px #808080;}
#nav ul li:hover ul{display:block;position:relative;width:120px;}
#nav ul li ul li:hover{background-color:red;}
/*三级菜单*/
#nav ul li:hover ul li ul{display:none;}
#nav ul li:hover ul li:hover ul{display:block; position: relative; left: 120px; top: -30px;}
#nav ul li:hover ul li:hover ul li{width:100px; height:30px; line-height: 30px;}
#nav ul li:hover ul li:hover ul li:hover{background-color:red;}
</style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司简介</a>
            <ul>
                <li><a href="#">公司简介</a></li>
                <li><a href="#">发展历程</a></li>
            </ul>
        </li>
        <li><a href="#">新闻动态</a>
            <ul>
                <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></li>
            </ul>
        </li>
        <li><a href="#">产品中心</a>
            <ul>
                <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="#">CPU</a></li>
                        <li><a href="#">内存</a></li>
                        <li><a href="#">硬盘</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">服务支持</a>
            <ul>
                <li><a href="#">驱动下载</a></li>
                <li><a href="#">在线咨询</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
</body>
</html>

shaowl111
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯html+css制作三级下拉菜单
09-24
主要介绍了纯html+css制作三级下拉菜单，如何制作下拉菜单效果，三级下拉菜单又是怎么实现的，本文为大家揭晓，感兴趣的小伙伴们可以参考一下
实现导航栏下拉菜单（带下拉三级菜单）
~~
10-22 2789
【代码】实现导航栏下拉菜单（带下拉三级菜单）
Vue 中实现三级联动下拉框
weixin_42902669的博客
03-27 5866
<!DOCTYPE html> <html lang='en'> <head> <title>下拉框三级联动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> &lt...
html纯css实现导航栏下拉菜单（带下拉三级菜单）
weixin_44432032的博客
09-29 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title></title> <style> * { margin: 0; padding: 0; } body, html { font
html5中三级下拉菜单实现案例
大数据-攻城狮
02-21 2105
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级下拉菜单&lt;/title&gt; &lt;style&gt; div{margin:30px 180px;} ul{list-style:non
html 三级下拉菜单,css三级下拉菜单实现方法分享
weixin_35695430的博客
06-03 613
复制代码代码如下:test/*设置通配符样式*/*{margin:0;padding:0;}body{font-size:12px;}ul{list-style:none;}a{text-decoration:none;}/*设置二级导航样式*/.nav {width:500px;height:30px;background-color:#b4b4b4;/*导航栏居中*/margin:auto;}...
html制作三级纵向菜单,HTML5实例之CSS3制作的三级下拉菜单（代码）
weixin_42525385的博客
05-30 782
HTML5实例之CSS3制作的三级下拉菜单(代码)三级下拉菜单p{margin:30px 180px;}ul{list-style:none;padding:0px;}ul li{float:left;position:relative;}ul li a{text-decoration:none;background:#a40000;display:block;line-height:40px;t...
纯css制作三级下拉菜单
热门推荐
web_xiaolei的博客
10-12 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：思路很简单，三级菜单直接用三层嵌套的ul布局： 电器
三级下拉列表怎么做 html,三级下拉菜单 变量_html/css_WEB-ITnose
weixin_28862557的博客
06-03 425
function list(idstr){var name1="subtree"+idstr; //定义一个变量 值为字符串“subtree”加上传进来的IDvar name2="img"+idstr; //idstr是一个数字字符,用于区别不同的子菜单和图片var objectobj=document.all(name1);//获取页面中ID或者name为name1的元素var imgo...
三级下拉列表 select 网页 html5
03-29
模仿地区选择下拉列表，做的，学院专业班级，下拉列表
Bootstrap左侧下拉三级菜单导航
11-19
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
CSS3响应式多级下拉菜单导航代码.zip
07-11
一款扁平风格带字体图标的CSS3响应式多级下拉菜单导航代码，兼容手机端二级下拉菜单、三级下拉菜单、四级下拉菜单代码。
CSS3响应式多级下拉菜单导航代码
01-01
一款扁平风格带字体图标的CSS3响应式多级下拉菜单导航代码，兼容手机端二级下拉菜单、三级下拉菜单、四级下拉菜单代码。
手机二三级导航，手机导航，响应式导航，自适应导航，下拉导航
08-22
手机二三级导航，手机导航，响应式导航，自适应导航，下拉导航
jquery实现二级导航下拉菜单效果实例
11-29
前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性...
利用HTML实现秒表功能
K584122526的博客
04-17 634
启动</button><button id="restBn">复位
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
最新发布
qq_30094821的博客
04-21 256
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
html css js实现二级菜单,JS+CSS实现简单的二级下拉导航菜单效果
06-07
好的，下面是实现二级下拉导航菜单的代码和步骤： 1. HTML结构 ``` <nav> <ul> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单3</a></li> <li><a href="#">子菜单4</a></li> </ul> </li> </ul> </nav> ``` 2. CSS样式 ``` nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; position: relative; } nav a { display: block; padding: 10px; color: #333; text-decoration: none; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } nav ul ul li { display: block; } nav ul ul a { padding: 10px; color: #333; } nav ul li:hover ul { display: block; } ``` 3. JS交互 ``` var navItems = document.querySelectorAll('nav li'); for (var i = 0; i < navItems.length; i++) { navItems[i].addEventListener('mouseover', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'block'; } }); navItems[i].addEventListener('mouseout', function() { var subMenu = this.querySelector('ul'); if (subMenu) { subMenu.style.display = 'none'; } }); } ``` 完成以上步骤后，您就可以在浏览器中看到一个简单的二级下拉导航菜单了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值