.
. .
.
.
(
*
)
.
.
(
*) .
.
.
.
.
.
.
.
.
.
.
(
*
)
.
.
.
.
.
.
(
*
)
.
. . .
. . . .(* ) . . . . . . .(* ) . . . . . . . . . . . . . . . . . . . . .
. . . .
. . &&. Asked . today
.
Seen
. 23 times
.
I attempted to produce a dropdown utilizing CSS.
Nevertheless, the setting of the sub-menu needs to be reduced because of appearances. Yet this is creating the dropdown to withdraw prior to going into.
Just how do I stop this from taking place? I composed a javascript yet it does refrain the task” ).
if(! isDropdownHover & & e.target.closest(‘
‘)!= null) return.
allow currentDropdown. if( isDropdownHover) {
currentDropdown= e.target.closest(‘ ‘).
currentDropdown.classlist.toggle(‘ energetic’).
} document.querySelectorAll(“
energetic”).
forEach( dropdown => {
if( dropdown==
currentDropdown) return.
dropdown.classlist.remove(‘ energetic’).}
).}
)
nav {
screen: inline-flex;
align-items: facility; size: 100%; elevation: 8rem;
border-bottom: 1.5 px strong black;}. nav-list {
screen: flex;
size: 100%;
}.
nav-list li {line-height: 10rem;
setting: family member;
}
. sub-menu>li>{
shade: #c 40707;
line-height: 5rem;
}. nav-list > li > {a screen: block;
shade: black;
cushioning: 0 1.5 rapid eye movement; font-size: 1.4 rapid eye movement; text-transform: capital; shift: shade 300ms;
}
. nav-list > li > a:: after {
web content: “”;
setting: outright; background-color
: #ff 2a00;
elevation: 3px;
size: 0;
left: 0;
base: 15px; shift: 0.1 s;}
.
nav-list > li > a: float: after {
size: 100%;}. nav-list a: after {shade: #e 3dedd;
}
. sub-menu {a shade: #ffffff; font-size: 1.3 rapid eye movement
; font-weight: 200; cushioning: 40px 40px;}
.
sub-menu {size: 60rem; screen: flex; setting: outright; presence: concealed;
z-index: 500;
background-color: rgb (0, 0, 0);
box-sizing: border-box; margin-top: 1rem; margin-left: -5 rapid eye movement;}. sub-menu a: float {
< ul course= "nav-list" data-dropdown >. < li >. < a href=" https://stackoverflow.com/questions/74863799/%" data-dropdown-button > Classification<.
<< ul course=" sub-menu">
<> .
<< li>>.
<< a href=" #">> abc< .
<< li>>.
<< a href=" #">> xyz< .
<< li>>.
<< a href=" #">> 123< .
<< li>>.
<< a href=" #">>! @ #< .
<[data-dropdown-button] The dropdown shuts prior to I can scroll to the block. It's readied to be a little bit reduced for appearances. Just how Do i stop this from taking place?[data-dropdown] Adam[data-dropdown]
.[data-dropdown] 2,790 1 1 gold badge4
18 18 bronze badges . asked . Vader .
15 4 4 bronze badges (* ) .
Have a look at our
Standard Procedure
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Cookie Plan
.
.(* )
.
Approve all cookies
.
