Pionowe menu - problem z chowaniem zawartości

pytanie zadane 23 września 2019 w HTML i CSS przez madara Nowicjusz (240 p.)

Hej, właśnie pracuje nad poziomym menu w css i html. Wszystko niby ładnie widać...użyłam znaczników hover to pojawianie się podmenu (wiem, że w przypadku telefonów lepsze byłoby kliknięcie (?), ale jeszcze nie zabierałam się za js. Cała nawigacja składa się z menu i undermenu. Problem polega na tym: po zjechaniu myszką za ostatni li underemenu, który należy do li menu cała nawigacja się chowa (w moim konkretnym przypadku, po zjechaniu poniżej "niedobory" znika cała nawigacja uniemożliwiając wciśnięcie dwóch ostatnich kategorii "O autorze/cele" i "kontakt".) Co mogłabym zrobić aby zlikwidować ten efekt? Wstawiam fragment kodu z nawigacją:

<nav>
			
				<ul class="logomenu">	
					<li>
						<a href="#">
							<div class="allspan">
								<span></span>
								<span></span>
								<span></span>
							</div>
						</a>
						<ul class="menu">
							<li><a href="#">Strona Główna</a></li>
							<li><a href="#">Przepisy</a>
								<ul class="undermenu">
									<li><a href="#">Śniadania</a></li>
									<li><a href="#">Obiady</a></li>
									<li><a href="#">Kolacje</a></li>
								</ul>
							</li>
							<li><a href="#">Teoria</a>
								<ul class="undermenu">
									<li><a href="#">Podstawy weganizmu</a></li>
									<li><a href="#">Komponowanie posiłków</a></li>
									<li><a href="#">Niedobory</a></li>
								</ul>
							</li>
							<li><a href="#">O autorze/cele</a></li>
							<li><a href="#">Kontakt</a></li>
						</ul>
					</li>
				</ul>
			
		</nav>

nav{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
	font-size: 1em;
}
.logomenu{
	background-color: rgb(118, 16, 201, 0.4);
	border-top: 1px solid #2e0252;
	height: 70px;
}
.logomenu a{
	display: block;
	height: 100%;
	width: 100%;
}
.logomenu:hover{
	background-color: rgb(118, 16, 201);
}
.allspan{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
span{
	display: block;
	width: 33px;
	height: 6px;
	background: #cdcdcd;
	margin-bottom: 7px;
}
.allspan > span:last-child{
	margin-bottom: 0;
}
.menu{
	text-align: center;
	font-size: 1.4em;
	background-color: #9884f0;
}

.menu a{
	line-height: 2.5;
}
.menu > li{
	border-bottom: 2px solid #2e0252;
}
.menu > li:first-child{
	border-top: 2px solid #2e0252;
}
.menu > li:hover{
	background-color: rgb(118, 16, 201);
}
.undermenu > li{
	background-color: #baabf7;
	border-bottom: 2px dashed #9884f0;
}
.undermenu > li:hover > a{
	color: #000;
}
/*display or not display menu*/
.undermenu{
	display:none;
}
.menu > li:hover > .undermenu{
	display: block;
}
.menu{
	display: none;
}
.logomenu > li:hover > .menu{
	display: block;
}

1 odpowiedź

odpowiedź 23 września 2019 przez Chess Szeryf (76,710 p.)
edycja 27 września 2019 przez Chess

Żeby pozbyć się tego efektu, to musisz mieć :hover aktywny nawet, gdy najedziesz na inne elementy. Skoro całe menu się chowa, to znaczy, że :hover aktywny nie jest, ponieważ menu jest ustawiane na display: block;, tylko wtedy, gdy ma aktywny :hover.

body {
  margin: 0;
  padding: 0;
}

ul, ol, li, a {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul {
  background: lightgreen;
}

.f {
  background-color: #22EEFF;
  display: none;
}

ol li:hover .f {
  width: calc(100% - 8px);
  position: absolute;
  display: block;
}

.f3 {
  border-left: 4px solid transparent;
  background-color: #22EEC9;
  /* position: relative; */
}

.f3:hover {
  border-left: 4px solid purple;
}


ul.f .temp::before {
  border-left: 4px solid #22EEFF;
  margin-left: -4px;
  z-index:1;
  position: relative;
  content: "";
  /* this rule is need, because e.g. letter "j" is visible outside the area */
}

.f li:hover:before {
   border-left: 4px solid purple;
   position: relative;
   z-index: 2;
}

a {
  padding: 4px;
}

a, a:visited, a:active {
  text-decoration: none;
  color: black;
  width: calc(100% - 8px);
  height: auto;
  display: inline-block;
}

<body style="background: darkgoldenrod;">

<nav>
  <ul>
      <ol class="f2">
        <li class="temp"><a href="#a1">abc</a></li>
        <li class="f3"><a href="#a2">sdfs</a>
          <ul class="f">
            <li class="temp"><a href="#a3">a</a></li>
            <li class="temp"><a href="#a4">b</a></li>
            <li class="temp"><a href="#a5">c</a></li>
          </ul>
        </li>
        <li class="temp"><a href="#a6">ghi</a></li>
        <li class="temp"><a href="#a7">jkl</a></li>
        <li class="f3"><a href="#a8">fake</a>
          <ul class="f">
            <li class="temp"><a href="#a9">x</a></li>
            <li class="temp"><a href="#a10">y</a></li>
          </ul>
        </li>
        <li class="temp"><a href="#a11">mno</a></li>
      </ol>
  </ul>
</nav>

</body>

Inna wersja menu poniżej.

.a {
  position: relative;
  width: 100%;
  background: orange;
}

.bt {
  position: relative;
 
}

.a:hover {
  background: orange;
}



.mm {
  background: pink;
  position: absolute;
  pointer-events: none;
  width: 100%;
}



.a:hover .mm {
  pointer-events: auto;
  z-index: 999; 
}

.a:hover .hidden2 {
  display:block;
}

.mm:hover {
  background: pink;
}

.mm:hover .hidden1 {
  display: block;
}

.hidden1:hover .hidden4 {
  display: block;
}

.hidden3:hover .hidden4 {
  display: block;
}

.hidden1, .hidden2, .hidden3, .hidden4 {
  display: none;
}

.nn {
  position: absolute;

  background: pink;
  top: 26px;
  width: calc(100% - 16px);
}

.bt:hover ~ .nn {
  z-index: -900;
  display: none;
}


.nn:hover .hidden3 {
  display: block;
}

span {
  display: none;
}

.a:hover span {
  display: block;
}

<body style="background: darkgoldenrod;">

<nav>

<div class="bt">
  <div class="a">
    <div class="b">b1
      <div class="hidden2">hidden2</div>
    </div>
 
    <div class="mm"><span>mm</span>
      <div class="hidden1">hidden1
        <div class="hidden4">hidden4</div>
      </div>
    </div>
  </div>
</div>

<div class="nn">mm
  <div class="hidden3">hidden1
    <div class="hidden4">hidden4</div>
  </div>
</div>
</nav>

</body>

komentarz 24 września 2019 przez madara Nowicjusz (240 p.)

Menu nie chowa się od razu jak najadę na inny element, chowa się tylko w przypadku kiedy zjadę kursorem myszki poniżej podmenu. Myślę, że może to chodzić o to, że jak zjeżdżam poniżej podmenu to wtedy podmenu zaczyna się chować, przesuwając jednocześnie całość menu w górę (kiedy podmenu się pojawia, wtedy całe menu się powiększa), tym samym sprawiając, że kursor myszy nie znajduję się w ogóle na menu, czy menu się chowa.