CSS下拉菜单鼠标移入菜单内容时，菜单隐藏消失的问题

最新推荐文章于 2024-11-11 11:41:46 发布

xiangyangxiy

最新推荐文章于 2024-11-11 11:41:46 发布

阅读量2.3k

点赞数 1

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/xiangyangxiy/article/details/124142953

版权

HTML CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述

在使用CSS制作下拉菜单时，鼠标在移动到下拉标题上，下拉菜单内容显示，鼠标移开时，菜单隐藏起来，但是但我们试图把鼠标移动到菜单内容上时，菜单内容也隐藏了。代码是仿照实现某网站的一个小的下拉菜单。

html


<body>

<div class="droplist">

  <p class="droptext">Xiaomi 手机</p>
  <div class="content">
  
  <div class="p1">
    <img src="1.png"
     width="200" height="138" /> 
    <a class="text1" href="#">Xiaomi 12 Pro<br/>
    <span>4699元起</span></a>
  </div>
  
  <div class="p1">
    <img src="2.png" width="200" 
    height="138" /> 
    <a class="text1" href="#">Xiaomi 12<br/>
    <span>3699元起</span></a>
  </div>
  
  <div class="p1">
    <img src="3.png" width="200" 
    height="138" /> 
    <a class="text1" href="#">Xiaomi 12X<br/>
    <span>2999元起</span></a>
  </div>
  
  <div class="p1">
    <img src="4.png" width="200" 
    height="138" /> 
    <a class="text1" href="#">Xiaomi 11 青春活力版<br/>
    <span>1899元起</span></a>
  </div>
  
  <div class="p1">
    <img src="5.png" width="200" 
    height="138" /> 
    <a class="text1" href="#">Xiaomi Civi<br/>
    <span>2299元起</span></a>
  </div>

</div>
</div>

</body>

CSS

.droplist{
	position:relative;
	display:block;
	cursor:pointer;
	padding:0;
	}
.content{
	margin:0;
	position:absolute;
	display:none;
	}
.droptext{
	margin-bottom:0;}
	
.droplist:hover .droptext{
	color:#F30;
	}
	
.droplist:hover .content{
	display:block;
	margin-top:0;}
	
.p1{
	margin:0;
	width:200px;
	text-align:center;
	float:left;}

.p1 span{
	color:#F33;
	}

.content a{
	text-decoration:none;
	color:#000;}

原因和解决方案

首先，我们用css写下拉菜单，一般过程是这样：一个大的父元素框架——droplist，包含一个触发下拉菜单的起点——droptext,和一个菜单内容——content，鼠标移动到父元素上时，下拉菜单显示，鼠标移开时，菜单内容隐藏。按照道理来说，鼠标放置父元素整体范围是不会收起菜单内容的，经过排错后发现，content与droptext存在空隙，鼠标移动到那个缝隙时，就离开了父元素，所以会存在鼠标移动时，菜单内容收起的情况。

解决方法之一：让空隙消失，设置 droptext的下外边距为0即 margin-bottom:0; content的上外边距为0 即 margin-top:0。