CSS悬停在Keep菜单显示块上

Question

I have created a notification system using html and css (please see below) but when i hover over the icon the menu appears which is correct, but when i move to choose any of the icons it disappears. Although i am not technically hovering over it because there is a small gap is there any way to fix this little delay?

 .numberCircle { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 20px; position:absolute; margin-left:30px; margin-bottom:10px; background-color:red; color:white; } .showme { display: none; position: absolute; width: 153px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; background-color:#1D1E22; border: 3px solid white; text-align:center !important; } .Resources:hover .showme {display: block;} .Resources:hover ~ .showme { display:block; } .showme:hover{ display:block; } .Resources:hover .showme { display: block; } .showme { top: 40px; position: relative; background: #ffffff; border: 1px solid #719ECE; /*set border colour here*/ width: 400px; height: 200px; border-radius: 3px; -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour and size here*/ -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8); filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); } .showme:after, .showme:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .showme:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 19px; left: 50%; margin-left: -19px; } .showme:before { border-color: rgba(113, 158, 206, 0); border-bottom-color: #719ECE; border-width: 20px; left: 50%; margin-left: -20px; } 

 <div class="Resources" style=" width: 60px; height: 70px; float:left;margin-top:30px"> <div class="numberCircle">1</div> <div id="ctl00_TopMenu_FontAwesome_divFA"> <i class="fa fa-fw fa-bell fa-3x " aria-hidden="true" style=" color:black;padding-top:10px;" ></i> </div> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'> </div> <div class="showme" style="position:absolute;margin-left:-190px;margin-top:80px;text-align:center;padding:20px;"> <a href="../../Brands.aspx" id="ctl00_TopMenu_A1" style="width:150px">Brands</a> <hr /> <a href="../../StockImages.aspx" id="ctl00_TopMenu_A2" style="width:150px">Stock Images</a> <hr /> <a href="../../HowTo.aspx" id="ctl00_TopMenu_A3" style="width:150px">How-To's</a> <hr /> </div> 

Answer 1

In the HTML code, add line-height to the "Resources" style ie

<div class="Resources" style=" width: 60px; height: 70px; float:left;margin-top:30px; line-height: 70px;">

JS Fiddle

Answer 2

You need an overlap in order for the :hover to continue to work. I recommend wrapping .showme with a div which it's purpose is to complete the overlap and .showme remains for visual purpose.

.showme-wrap {
  display: none;
  position: absolute;
  margin-left:-190px;
  text-align:center;
  z-index: 1;
}

 .numberCircle { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 20px; position:absolute; margin-left:30px; margin-bottom:10px; background-color:red; color:white; } .showme { width: 153px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color:#1D1E22; border: 3px solid white; padding:20px; text-align:center !important; } .Resources:hover .showme-wrap { display:block; } .showme-wrap { display: none; position: absolute; margin-left:-190px; text-align:center; z-index: 1; } .showme:hover{ display:block; } .Resources:hover .showme { display: block; } .showme { top: 40px; position: relative; background: #ffffff; border: 1px solid #719ECE; /*set border colour here*/ width: 400px; height: 200px; border-radius: 3px; -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour and size here*/ -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8); filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); } .showme:after, .showme:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .showme:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 19px; left: 50%; margin-left: -19px; } .showme:before { border-color: rgba(113, 158, 206, 0); border-bottom-color: #719ECE; border-width: 20px; left: 50%; margin-left: -20px; } 

 <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'> <div class="Resources" style="width: 60px; height: 70px; float:left;margin-top:30px"> <div class="numberCircle">1</div> <div id="ctl00_TopMenu_FontAwesome_divFA"> <i class="fa fa-fw fa-bell fa-3x " aria-hidden="true" style="color:black;padding-top:10px;"></i> </div> <div class="showme-wrap"> <div class="showme" style=""> <a href="../../Brands.aspx" id="ctl00_TopMenu_A1" style="width:150px">Brands</a> <hr /> <a href="../../StockImages.aspx" id="ctl00_TopMenu_A2" style="width:150px">Stock Images</a> <hr /> <a href="../../HowTo.aspx" id="ctl00_TopMenu_A3" style="width:150px">How-To's</a> <hr /> </div> </div> </div>