Как сделать так, чтобы всплывающее подменю оставалось видимым, когда мышь находится вне родительского контейнера, и подменю при наведении

Question

Как сделать так, чтобы всплывающее подменю оставалось видимым, когда указатель мыши находится за пределами родительского контейнера или подменю?

В настоящее время, если мышь не скользит прямо от родительского контейнера (B) .account-settings-container к верхней стрелке подменю, меню не будет оставаться видимым

Обратите внимание, что проблема возникает когда подменю находится прямо под панелью навигации. Небольшое расстояние от нижнего отступа навигационной панели - это то, что сводит на нет видимость подменю при наведении вокруг этой области, но мне нужно навигационное заполнение, чтобы дать рядам некоторое пространство для дыхания. Возможно, придется отрегулировать положение y перевода в конце CSS, чтобы расположить подменю непосредственно под панелью навигации.

Также есть лучший способ убедиться, что подменю отображается непосредственно под панелью навигации независимо от высоты панели навигации?

Наконец, можно ли изменить цвет верхней стрелки подменю на тот же цвет, который отображается при наведении указателя мыши на параметры подменю?

/* ==========================================================================
                                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

Есть несколько способов решить эту проблему. во-первых, вы могли бы сказать, что это достаточно хорошо. во-вторых, вы можете переключить стиль CSS с помощью события onMouseOver javascript и добавить задержку после того, как мышь уйдет, чтобы создать ускользание. и в-третьих, вы можете полностью отказаться от наведения и работать с событием onClick для кнопки / документа.