如何使弹出子菜单在鼠标位于父容器外部时保持可见，并在悬停时使子菜单保持可见

Question

如何使弹出子菜单在鼠标悬停在其父容器或子菜单之外时保持可见？

目前，如果鼠标没有从父容器 (B(.account-settings-container子菜单顶部箭头直接向下滑动，则菜单将不可见

请注意，当子菜单位于导航栏的正下方时，会出现此问题。导航栏底部填充的微小间距抵消了在该区域周围悬停时子菜单的可见性，但我需要导航填充来为行提供一些呼吸空间。可能必须调整 CSS 末尾翻译的 y 位置，以将子菜单直接定位在导航栏下方。

还有没有更好的方法来确保子菜单直接显示在导航栏下方，而不管导航栏的高度如何？

最后，是否可以将子菜单的顶部箭头颜色更改为将鼠标悬停在子菜单选项上时呈现的颜色相同？

/* ==========================================================================
Start of CSS reset
========================================================================== */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}html{font-size:62.5%}
/* ==========================================================================
End of CSS reset
========================================================================== */
/* ==========================================================================
Start of Nav 
========================================================================== */
html {
font-size: 62.5%;
}
#layout #main-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0.5rem 3rem;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient( linear, right top, left top, from(#185a9d), color-stop(#185a9d), to(#58a3b2));
background-image: linear-gradient(to left, #185a9d, #185a9d, #58a3b2);
}
#layout #main-nav .nav-tabs-container ul li {
margin-right: 0.7rem;
display: inline-block;
}
#layout #main-nav .nav-tabs-container ul li a {
display: block;
padding: 1rem 0.9rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
padding: 2rem 2rem 1rem 2rem;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
#layout #main-nav .nav-tabs-container ul li.active>a,
#layout #main-nav .nav-tabs-container ul li>a:hover {
border-bottom: 2px solid #fff;
}
#layout #main-nav .header-menu-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#layout #main-nav .header-menu-container>.header-menu-tab {
outline: none;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-right: 1rem;
}
#layout #main-nav .header-menu-container>.header-menu-tab:last-of-type {
margin-right: 0rem;
}
#layout #main-nav .header-menu-container #general-settings-btn,
#layout #main-nav .header-menu-container #account-settings-btn {
border: none;
padding: 0.5rem;
border-radius: 50%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
color: #fff;
background-color: transparent;
-webkit-transition: background 0.2s ease;
transition: background 0.2s ease;
}
#layout #main-nav .header-menu-container #general-settings-btn:hover,
#layout #main-nav .header-menu-container #account-settings-btn:hover {
background-color: rgba(209, 209, 209, 0.336);
}
#layout #main-nav .header-menu-container #general-settings-btn {
width: 3.8rem;
height: 3.8rem;
}
#layout #main-nav .header-menu-container #general-settings-btn .svg-inline--fa,
#layout #main-nav .header-menu-container #general-settings-btn .svg-inline--fa.fa-w-16 {
width: 1.8rem;
height: 1.8rem;
}
#layout #main-nav .header-menu-container #account-settings-btn {
width: 4.3rem;
height: 4.3rem;
}
#layout #main-nav .header-menu-container #account-settings-btn #user-initial {
width: 3.3rem;
display: block;
font-size: 1.7rem;
border-radius: 50%;
line-height: 3.3rem;
background-color: #007bff;
}
#layout #main-nav .header-menu-container #add-location-btn,
#layout #main-nav .header-menu-container #select-location {
height: 3.5rem;
padding: 0 0.8rem;
font-size: 1.6rem;
color: #fff;
border-color: #fff;
}
#layout #main-nav .header-menu-container #select-location {
cursor: pointer;
}
#layout #main-nav .header-menu-container .general-settings-container,
#layout #main-nav .header-menu-container .account-settings-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: auto;
align-self: auto;
position: relative;
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu {
left: 50%;
opacity: 0;
z-index: 99;
visibility: hidden;
position: absolute;
background-color: #f3f3f3;
background-color: #f9f9f9;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-transform: translate(-50%, 8rem);
transform: translate(-50%, 8rem);
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu::before,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu::before {
content: "";
top: -0.5rem;
position: absolute;
border-style: solid;
right: calc(50% - 0.6rem);
border-width: 0 0.6rem 0.6rem 0.6rem;
border-color: transparent transparent #fff transparent;
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu a,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu a {
display: block;
text-align: left;
font-size: 1.5rem;
color: #676666;
white-space: nowrap;
padding: 1rem 0.7rem;
text-decoration: none;
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu a:hover,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu a:hover {
color: #000;
background-color: #e0e0e0;
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu a .svg-inline--fa,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu a .svg-inline--fa {
margin-right: 0.5rem;
}
#layout #main-nav .header-menu-container .general-settings-container .tab-submenu hr,
#layout #main-nav .header-menu-container .account-settings-container .tab-submenu hr {
margin: 0;
}
#layout #main-nav .header-menu-container .general-settings-container:hover>.tab-submenu,
#layout #main-nav .header-menu-container .account-settings-container:hover>.tab-submenu {
opacity: 1;
visibility: visible;
-webkit-transform: translate(-50%, 6.8rem);
transform: translate(-50%, 6.8rem);
-webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<section id="layout">
<nav id="main-nav">
<!------------------------------------------------------ Nav tabs ------------------------------------------------------>
<div class="nav-tabs-container">
<ul>
<li class="active"><a id="inbox-section" href="#">Inbox</a></li>
<li><a id="contact-section" href="#">Contact</a></li>
<li><a id="phone-section" href="#">Phone</a></li>
</ul>
</div>
<!-------------------------------------------- Header Menu -------------------------------------------->
<div class="header-menu-container">
<!-------------------------------------------- General Settings button -------------------------------------------->
<span class="header-menu-tab general-settings-container">
<button id="general-settings-btn" title="General Settings"> <i class="fas fa-th"></i></button>
<span class="tab-submenu general-settings-options">
<a href="#"><i class="fas fa-bell"></i> Placeholder 1</a>
<a href="#"><i class="fas fa-bell"></i> Placeholder 2</a>
<a href="#"><i class="fas fa-bell"></i> Placeholder 3</a>
</span>
</span>
<!------------------------------------------------------ Account settings button ------------------------------------------------------>
<span class="header-menu-tab account-settings-container">
<button id="account-settings-btn" title="Account settings">
<span id="user-initial">B</span>
</button>
<span class="tab-submenu account-settings-options">
<a href="#"><i class="fas fa-envelope-open-text"></i> Placeholder 4</a>
<a href="#"><i class="fas fa-coins"></i> Placeholder 5</a>
<a href="#"><i class="far fa-credit-card"></i> Placeholder 6</a>
<hr>
<a href="#"><i class="fas fa-map-marked-alt"></i> Placeholder 7</a>
<a href="#"><i class="fas fa-minus-circle"></i> Placeholder 8</a>
<a href="#"><i class="fas fa-sign-out-alt"></i> Placeholder 9</a>
</span>
</span>
<!------------------------------------------------------ Add locations button ------------------------------------------------------>
<span class="header-menu-tab">
<button id="add-location-btn" class="btn btn-outline-primary">Add Location</button>
</span>
<!------------------------------------------------------ Select locations button ------------------------------------------------------>
<span class="header-menu-tab">
<select id="select-location" class="btn btn-outline-primary">
<option value="0" selected="">Select Location</option>
<option>Location 1</option>
<option>Location 2</option>
</select>
</span>

Answer 1

有几种方法可以解决这个问题。 首先，你可以说它足够好。 其次，您可以通过 JavaScript 事件切换 CSS 样式onMouseOver并在鼠标离开后添加延迟以创建逃避。 第三，您可以完全取消悬停并使用按钮/文档上的onClick事件。