html – 悬停后保持下拉菜单打开(CSS)

概述我创建了一个水平菜单,当您悬停项目时,会出现一个下拉菜单.这一切都很好.但是,当您离开菜单项(使用下拉菜单)时,下拉菜单会消失.我知道这是因为你不再徘徊它,但我该如何解决这个问题呢？注意：我不希望它下面的下拉菜单,我希望菜单项和下拉菜单之间有一个合理的差距(就像我现在所拥有的那样).谢谢. HTML <header id="header"> <div class="container"> 我创建了一个水平菜单,当您悬停项目时,会出现一个下拉菜单.这一切都很好.但是,当您离开菜单项(使用下拉菜单)时,下拉菜单会消失.我知道这是因为你不再徘徊它,但我该如何解决这个问题呢？注意：我不希望它下面的下拉菜单,我希望菜单项和下拉菜单之间有一个合理的差距(就像我现在所拥有的那样).谢谢.

HTML

<header ID="header">    <div >        <a href="#top-anchor"><div ID="logo"></div></a>        <nav >            <a href="index.HTML" >ABOUT</a>                <div >                    <a href="index.HTML#core-services-anchor">CORE SERVICES</a>                    <a href="index.HTML#atandl-anchor">AT&amp;L</a>                    <a href="index.HTML#hseq-anchor">HSEQ</a>                    <a href="index.HTML#clIEnts-anchor">CLIENTS</a>                    <a href="index.HTML#contact-anchor">CONTACT</a>                </div>            <a href="services.HTML" >SERVICES</a>            <a href="facilitIEs.HTML" >FACIliTIES</a>            <a href="#map-anchor" >CONTACT</a>        </nav>        <div ID="hamburger"></div>        <!--<div ID="Box-shadow-menu"></div>-->    </div></header>

CSS

#header {  position: fixed;  top: 0;  left: 0;  wIDth: 100%;  height: 100px;  user-select: none;  display: block;  Transition: all 0.8s;  line-height: 100px;  z-index: 1000;  transform: translateX(0);  backface-visibility: hIDden;  margin: 0;}header .container {  wIDth: 1440px;  height: 100px;  border-bottom: 0.75px solID rgba(255,255,0.1);}#logo {  wIDth: 55px;  height: 55px;  float: left;  margin-top: 27px;  background-image: url(../images/logo_white.png);  background-size: cover;}nav.header-menu {  float: right;  height: 96px;  vertical-align: mIDdle;  padding-top: 1px;}.header-menu-item {  Font-family: 'Montserrat',sans-serif;  Font-size: 11px;  Font-weight: 800;  margin-left: 20px;  text-decoration: none;  color: #ffffff;  line-height: 96px;  letter-spacing: 0.5px;  Transition: 0.55s;}.toggle {  opacity: 0.3;}.current {  border-bottom: 2px solID #fff;  padding-bottom: 40px;}.about-dropdown {  position: absolute;  background-color: #fff;  min-wIDth: 160px;  Box-shadow: 0 0 4px 3px rgba(0,0.1);  z-index: 3000;  margin-top: 35px;  margin-left: -35px;  border-radius: 3px;  display: none;  Transition: 0.8s;}.about-dropdown a {  display: block;  text-decoration: none;  padding: 0px 28px;  Font-family: 'Montserrat',sans-serif;  Font-size: 11px;  Font-weight: 800;  margin: 0;  line-height: 50px;  border-bottom: 1px solID rgba(0,0.1);}.header-menu-item:hover + .about-dropdown {  display: block;}

解决方法 在’a’标签上,在悬停时为其添加高度或填充底部.您的’a’标记可能需要定位为绝对标记,以使其高度不会影响标题的高度.

像下面这样的东西

.about-dropdown a:hover {    padding-bottom: 30px; /*height dependent on the gap you want to fill*/    position: absolute; }

总结

以上是内存溢出为你收集整理的html – 悬停后保持下拉菜单打开(CSS)全部内容，希望文章能够帮你解决html – 悬停后保持下拉菜单打开(CSS)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。