三级菜单

最新推荐文章于 2019-10-10 20:11:03 发布
最新推荐文章于 2019-10-10 20:11:03 发布
阅读量738 收藏
点赞数
文章标签： 三级菜单 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38401285/article/details/80087894
版权

bluej三级菜单

*{
	margin:0;
	padding:0;
}
body{
	background-color: #3c79b0;
}
ul li{
	list-style: none;
}
/* 父级没有设定高度,子元素有浮动,导致父元素没有高度,给父级清除浮动 */
.clearfix:after{
	content: '';
	clear:both;
	display: block;
}
.box{
	width:100%;
	height:60px;
	line-height: 60px;
	background:#000;
}
.nav{
	width:676px;
	color:#fff;
	margin:auto;
	padding-top: 15px;
}
.nav .item{
	padding:0 10px;
	height:45px;
	line-height: 45px;
	text-align: center;
	float:left;
	font-size:12px;
	position:relative;
}
.nav .list{
	width:200px;
	background:#1a1a1a;
	position:absolute;
	top:45px;
	left:0;
	font-size: 12px;
	display:none;
}
.nav .list li{
	position: relative;
	text-align: left;
	padding-left: 10px;
}
.nav .list li:hover{
	background:#4d4d4d;
}
.nav .item:hover{
	background:#1a1a1a;
}
.nav .item:hover >ul{
	display:block;
}
.nav .list1{
	/* 第三级菜单 */
	width:200px;
	background:#1a1a1a;
	position:absolute;
	top:0;
	left:200px;
	font-size: 12px;
	display:none;
}
.nav .list > li:hover ul{
	display:block;
}


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="keywords" content="三级菜单 菜单">
	<meta name="description" content="三级菜单">
	<title>三级菜单</title>
	<link rel="stylesheet" href="css/first.css">
</head>
<body>
<div class="box">
	<ul class="nav clearfix">
		<li class="item">
		一级目录1	
			<ul class="list">
				<li>
					JAVASCRIPT特效1
					<ul class="list1">
						<li>网页特效1</li>
						<li>网页特效2</li>
						<li>网页特效3</li>
						<li>网页特效4</li>
						<li>网页特效5</li>
					</ul>
				</li>
				<li>
					JAVASCRIPT特效2
					<ul class="list1">
						<li>网页特效11</li>
						<li>网页特效22</li>
						<li>网页特效33</li>
						<li>网页特效44</li>
						<li>网页特效55</li>
					</ul>
				</li>
				<li>
					JAVASCRIPT特效3
					<ul class="list1">
						<li>网页特效111</li>
						<li>网页特效222</li>
						<li>网页特效333</li>
						<li>网页特效444</li>
						<li>网页特效555</li>
					</ul>
				</li>
				<li>
				JAVASCRIPT特效4
				<ul class="list1">
					<li>网页特效11</li>
					<li>网页特效22</li>
					<li>网页特效33</li>
					<li>网页特效44</li>
					<li>网页特效55</li>
				</ul>
				</li>
				<li>
				JAVASCRIPT特效5
				<ul class="list1">
					<li>网页特效12</li>
					<li>网页特效21</li>
					<li>网页特效31</li>
					<li>网页特效42</li>
					<li>网页特效51</li>
				</ul>
				</li>
			</ul>
		</li>
		<li class="item">
		一级目录2
			<ul class="list">
				<li>
				JAVASCRIPT特效1
				<ul class="list1">
					<li>网页特效1</li>
					<li>网页特效2</li>
					<li>网页特效3</li>
					<li>网页特效4</li>
					<li>网页特效5</li>
				</ul>
				</li>
				<li>
				JAVASCRIPT特效2
				<ul class="list1">
					<li>网页特效11</li>
					<li>网页特效22</li>
					<li>网页特效33</li>
					<li>网页特效44</li>
					<li>网页特效55</li>
				</ul>
				</li>
				<li>JAVASCRIPT特效3</li>
				<li>JAVASCRIPT特效4</li>
				<li>JAVASCRIPT特效5</li>
			</ul>
		</li>
		<li class="item">
		一级目录3
			<ul class="list">
				<li>JAVASCRIPT特效1</li>
				<li>JAVASCRIPT特效2</li>
				<li>JAVASCRIPT特效3</li>
				<li>JAVASCRIPT特效4</li>
				<li>JAVASCRIPT特效5</li>
			</ul>
		</li>
		<li class="item">
		一级目录4
			<ul class="list">
				<li>JAVASCRIPT特效1</li>
				<li>JAVASCRIPT特效2</li>
				<li>JAVASCRIPT特效3</li>
				<li>JAVASCRIPT特效4</li>
				<li>JAVASCRIPT特效5</li>
			</ul>
		</li>
		<li class="item">
		一级目录5
			<ul class="list">
				<li>JAVASCRIPT特效1</li>
				<li>JAVASCRIPT特效2</li>
				<li>JAVASCRIPT特效3</li>
				<li>JAVASCRIPT特效4</li>
				<li>JAVASCRIPT特效5</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

结果：


夕阳下美了剪影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 三级菜单
小田同學的博客
05-09 2611
在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。 大致代码如下：<body> <aside> <ul class="one"> <li> <a href="#" class="a">目录A</a> <ul class="two" style="display:
三级树形菜单列表，附带完整工程解说，SQL建表语句和分析，立马看懂和运用
06-05
本工程连接数据库生成树形菜单，在开发中可做出权限菜单生成，列表菜单生成。第二级和第三级节点自由增加。附带完整SQL建表和插入数据语句，结构分析。代码重要关键部分注释和打印。附带完整测试语句，解说。方便大家理解和熟悉。
HTML三级菜单
White_Poppy的博客
10-18 8934
html文件 &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt; &lt
纯css实现三级菜单栏
h1580824951的专栏
04-17 1万+
之前已经介绍了如何使用纯css实现二级菜单栏，其实三级菜单栏就是在二级菜单栏的基础上实现的。 我们先做成这个样子： 可以看到，这里我们在“关于我们”——“我们的故事”下面添加了三级菜单，这个只需要在“我们的故事”这个li里面添加一个ul即可实现； 不过这里仍然存在着一个在二级菜单栏实现中已经提及的问题： 当我们把鼠标的光标从红框中的“故事3”位置移动到黄框所在位置时，红框中
三级菜单多选
11-22
三级菜单多选，$(document).ready(function() { $('.caputure').click(function(){ if($(this).siblings('ul').css('display')=='none'){ $(this).parent('li').siblings('li').slideDown(100); $(this)....
Bootstrap左侧下拉三级菜单导航
11-19
在Bootstrap中，构建一个左侧下拉三级菜单导航是常见的需求，尤其对于那些具有复杂层级结构的网站。这种导航可以帮助用户轻松地浏览和访问网站的各个部分。 首先，让我们了解下Bootstrap菜单的基本构造。Bootstrap...
三级菜单样式
12-27
本项目主要关注的是"三级菜单样式"的实现，这是在网站导航中常见的一个功能，尤其适用于内容丰富的大型网站。通过结合CSS3、HTML5和JavaScript的技术，我们可以创建出具有动态效果的三级菜单，使用户在浏览时能更...
NFine 三级菜单.ZIP.课程资源
06-18
《NFine 三级菜单：构建高效滑动导航的实践指南》 在当今互联网应用中，良好的用户界面设计是提升用户体验的关键因素之一。特别是在企业级应用中，清晰且操作便捷的菜单系统更是不可或缺。NFine 快速开发框架，以其...
基于stm32的三级菜单
06-11
基于STM32的三级菜单设计是实现嵌入式系统用户界面的重要方式，尤其适用于那些需要复杂交互但资源有限的设备。这个设计利用了STM32的高效处理能力和结构化的编程方法，使得用户可以通过简单的按键操作在多个菜单层级...
jquery easyui 三级菜单导航
01-03
通过jquery easyui 实现三级菜单导航栏
分别用css、JS、jQuery实现二级菜单、三级菜单
SmileRM的博客
12-19 1万+
先看一下效果图，再决定是否接着往下看二级菜单的实现，先编写HTML结构<ul class="t1 fl"> <li>一级菜单 <ul class="t2"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul cla
三级菜单（练习）
qq_37493425的博客
02-18 264
menu = { '北京': { '海淀': { '五道口': { 'soho': {}, '网易': {}, 'google': {} }, '中关村': { '爱奇艺': ...
html纯css实现导航栏下拉菜单（带下拉三级菜单）
热门推荐
后生丶的博客
06-02 4万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;庄稼汉&lt;/title&gt; &lt;style&gt; * { margin: 0;
Jquery三级菜单切换
HelloKitty520123的专栏
01-21 1836
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-1.7.2.min.js" ></script> <script type="text/javascrip
用jQuery实现三级下拉菜单
蜗蜗牛在路上的博客
12-24 5315
这篇文章是我借鉴别人文章的基础，自己练了一遍并加了一些自己的想法进去，现总结如下： 咱们先看一下设计图： 1,2,3是主菜单，点击1的时候出现1-1,1-2,1-3再次点击 1-2的时候出现1-2-1,1-2-......功能以此类推 这就是功能展示，那么我们如何通过jQuery来实现呢？ 思路： 先用ul列表来布局，并且刚开始的时候下拉菜单都是隐藏状态的显然有用到一个关键的
HTML+CSS 实现下拉三级菜单
小小程序猿的博客
10-10 4714
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
android 三级菜单
最新发布
06-09
实现三级菜单的方法如下： 1. 创建菜单资源文件：在 res/menu 目录下创建一个 XML 文件，定义菜单项和子菜单项。 2. 在 Activity 中加载菜单：在 onCreateOptionsMenu() 方法中调用 MenuInflater.inflate() 方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值