当鼠标悬停在其父容器或子菜单之外时，如何使弹出子菜单保持可见状态？
当前，如果鼠标没有从父容器（B）.account-settings-container向下直线滑动到子菜单的顶部箭头，则菜单将不可见
请注意，当子菜单位于导航栏正下方时，会发生此问题。与导航栏底部的填充物之间的微小间距是在子菜单在该区域上徘徊时否定子菜单的可见性的原因，但是我需要使用导航填充物为行提供一些呼吸的空间。可能必须在CSS末尾调整translate的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>有几种解决方法。首先，您可以说它足够好。其次，您可以通过onMouseOver javascript事件切换CSS样式，并在鼠标离开后添加延迟以创建省略。第三，您可以完全取消悬停并使用按钮/文档上的onClick事件。