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

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

В настоящее время, если мышь не скользит прямо вниз от родительского контейнера (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>


css popup hover position mouseover
person Edwards    schedule 23.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

person Matan Sanbira    schedule 23.01.2020