学习笔记（6）下拉及多级弹出菜单

最新推荐文章于 2023-08-30 13:31:30 发布

前端学习007

最新推荐文章于 2023-08-30 13:31:30 发布

阅读量647

点赞数

分类专栏：前端文章标签：下拉菜单 css 定位

本文链接：https://blog.csdn.net/weixin_44433499/article/details/105727557

版权

内容和知识点：

带下拉子菜单的导航菜单
绝对定位和浮动的区别和运用
css自适应宽度滑动门菜单

一、带下拉子菜单的导航菜单
纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已。
先在html代码增加二级菜单的代码。
增加完代码后，在浏览器里预览一下：
在这里插入图片描述
是不是一看头都大了，怎么变成这样了。我们分析一下错乱的原因。首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列，所以我们先把二级菜单的背景和浮动清除掉，增加以下css代码：
#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}

预览看下，二级菜单是不是已经归位了，但鼠标划过时还继承了一级菜单的样式.
在这里插入图片描述

第一行设置二级菜单的灰色边框；为了美观，我们把下拉菜单的宽度设置成和一级菜单宽度相同，第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px，和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px；最后一行设置鼠标划过时的样式。

            #menu ul li ul {
   
				border: solid 1px #EEEEEE;
			}
			#menu ul li ul li {
   
				float: none;
				width: 85px;
				background-color: palegoldenrod;
				margin: 0;
			}

			#menu ul li ul li a {
   
				background: none;
			}

			#menu ul li ul li a:hover {
   
				background: #333;
				color: #fff;
			}

在这里插入图片描述

下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：

            #menu ul li ul {
   
				border: solid 1px #EEEEEE;
				display: none;
			}

			#menu ul li:hover ul {
   
				display: block;
			}

注意第二行的写法，#menu ul li:hover ul这个比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式，这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示，这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则,就实现了IE6下的正确显示。所以增加如下代码：
#menu ul li.sfhover ul { display:block;}

还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menu ul li ul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<script>
			{
    
				var sfEls=document.getElementById("menu").getElementsByTagName("li")