Ż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>