CSS求一段最简单的鼠标经过显示二级菜单的代码

网上看了很多。。但是不懂。。有没有比较简单的。

2024年11月17日 13:29

有3个网友回答

网友（1）：

    
	body{    
	margin:0px;    
	padding:0px;    
	}    
		    
	li{    
	list-style:url(1.jpg);    
	}    
	a{    
	display:block;    
	}    
	a:link,a:visited  {    
	text-decoration: none;    
	color:#000000;    
}    
.menu{    
		margin:0px auto;    
		width:404px;    
		height:21px;    
		}    
		.menu ul{    
		margin:0px;    
		padding:0px;    
		}    
		.menu ul li{    
		position:relative;    
		float:left;    
	list-style:none;    
	padding:2px;    
	border:1px dotted;    
	font-size:14px;    
	width:95px;    
	text-align: center;    
	margin:0px;	
    
	background:#999999;    
	}    
	.menu ul li ul{    
	display:none;    
	}    
	.menu ul li:hover ul{    
	display:block;    
	position: absolute; left: 0px; top: 21px;    
	}    
	.menu a:link{    
	background:url(2.png) -137px -10px;    
	}    
	.menu a:hover{    
	background:url(2.png) -26px -10px;    
	}    
	    
	    
	    
       
下面是一个导航条
    
    
     
   首页
    
   新闻中心    
	    
新手入门
    
视频教程
    
常见问题
    
    
    
   学习课程    
	    
新手入门
    
视频教程
    
常见问题
    
    
	
    
   联系我们

我简单的说一下思路：

首先用ul下面嵌套一个ul。。外面的是第一层栏目列表，嵌套的是第二个。

首先定义嵌套的ul不显示

.menu ul li ul{
display:none;
}

当鼠标划过li的时候下面的ul显示出来

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

这样就可以了，但是我们发现显示出来的二级栏目不是我们想要的位置，那么对它进行绝对定位

.menu ul li:hover ul{
display:block;
position: absolute; left: 0px; top: 21px;
}

因为绝对定位的元素的位置相对于最近的已定位祖先元素。所以它外面的li设置一个相对定位

.menu ul li{
position:relative;

}

这样效果就出来了。其他的属性都是一些调整了，在一些低版本的浏览器中会失效，（特别低级的）

网友（2）：

ul 最好里面不要再嵌套ul了你可以把下拉菜单写成一个隐藏的div display:none 用JS 控制当鼠标移动到某个li 时把 display改为 block；移开再改为 none

网友（3）：

不是纯css能解决的，需要html+css+js结合