问题描述

在使用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。

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

html中按钮下拉菜单,CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...
html下拉菜单原理,HTML5 教程之CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单实例演示 2 下拉菜单实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出 ...
php菜单栏样式,最常见的多个css下拉菜单样式分享
CSS下拉菜单怎么做?在浏览网页的时候我们总会看到各式各样的下拉菜单,那么这些下拉菜单是怎么实现的呢?本篇文章就来给大家分享一下常用的多个CSS下拉菜单的实现方法. CSS下拉菜单的精选文章随便打开 ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
灰色简约三级CSS下拉菜单代码
代码简介: 又一款CSS Menu,银灰色下拉菜单,老外网站扒下来的,兼容性还不错.它最多可以支持三级,如果你的菜单项目很多,你可以自己扩展,一般都是成对出现的标签,分清楚就可以了. 代码内容: &l ...
兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
css下拉菜单汇总案例
1.基础的下拉菜单将鼠标移到元素上时出现的下拉框.效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head ...
css下拉菜单样式_CSS样式下拉菜单
css下拉菜单样式 Introduction: 介绍: As we all know that the styling website or web pages are an important as ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
HTML下拉菜单改变颜色,CSS下拉菜单中字体颜色问题
纯CSS下拉菜单演示 *{margin:0;padding:0;} ul{list-style-type:none;} a{text-decoration:none; color:#666; font ...

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

问题描述

html

CSS

原因和解决方案

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

最新文章

热门文章