大家在做项目时难免会遇到关于折叠菜单的问题，具体的情形如下：
当鼠标悬停到主导航时显示对应的子菜单，但是当你去选择子菜单的选项时就出现子菜单全部消失的问题，针对这一现象怎么解决？
代码DEMO
<body>
<div class="dropdown">
<span>菜单</span>
<ul class="dropdown-content">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div>后续内容</div>
</body>.dropdown{
display:inline-block;
position:relative;
}
.dropdown-content{
display:none;
position:absolute;
}
.dropdown:hover .dropdown-content{
display:block;
}
.dropdown , .dropdown-content{
border-width:2px;
border-style:dotted;
}
原因分析
1、这个菜单的结构:由设置 margin-top:0;使这个空隙消失；
2、实现这个菜单内容的替换成(另一个)(猜想也许不同种类的元素的默认 margin-top不一样?进一步猜想，这个不同也许就是块元素与内联元素的区别之一?)。
除此之外，还会发现一个问题:父元素的边框竟然没有包住子元素!我想，这是因为我们把菜单内容设置成了 position:absolute为什么要这样做?因为如果子元素被包在父元素内(position 保持默认值)，那么当下拉菜单向下弹出时，页面中从此开始的后续内容也就跟着往下移了，我们通常不希望有这种效果。当然，这也勉强算是解决本文问题的又一种方案吧。
如何解决
由于我们是第一种情况，因此只需要将空隙部分处理就好，将父级右侧与子菜单div左对齐，添加left属性；改为对应的值，如：left:auto; 同时可以将主导航的div添加一个属性position：relative；如下成功的前端折叠导航显示：
以上就是关于如何解决纯css折叠菜单鼠标移入菜单内容时菜单隐藏消失的问题？若你也遇到该问题，不妨按照以上步骤进行操作，更多建站问题请持续订阅该栏目。
