У меня есть выпадающее меню с элементами в нем, я пытаюсь сделать так, чтобы, когда вы проходите над одним предметом, появляется второй, а когда вы не зависаете над ним, он исчезает. Проблема в том, что если вы нажмете go на курсор, который он вызывает, снова продолжите, а второй элемент не исчезнет. Как я могу это исправить?
Заранее спасибо! (по умолчанию для элемента установлено значение «Нет»)
Я пытался разделить элементы, чтобы первый не переключал второй, но мне не удалось сделать это с javascript. https://imgur.com/a/HJsULe2
function extend(i) {
document.getElementById(i).className = "extend";
document.getElementById(i).style.display = "block";
document.getElementById(i).style.backgroundColor = "#383838";
document.getElementById(i).addEventListener("mouseleave",function() { retract(i); });
return;
}
function retract(i){
document.getElementById(i).style.display = 'none';
return;
}
Раскрывающийся список создается в html
<div class="dropdown" id="links">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="../index.html">StarLink</a>
<a href="s_page1.html" onmouseover="extend(1);">StarLink Concerns ></a>
<div class="extend";>
<a style="display: none;" id="1" onmouseleave="retract(1);" href="sub/sub_page1.html">SpaceX ></a>
</div>
<a href="s_page2.html" onmouseover="extend(2);">Second Page></a>
<div class="extend";>
<a style="display: none;" id="2" onmouseleave="retract(2);" href="sub/sub_page2.html">Sub Page 2></a>
</div>
<a href="s_page3.html" onmouseover="extend(3);">Third Page></a>
<div class="extend";>
<a style="display: none;" id="3" onmouseleave="retract(3);" href="sub/sub_page3.html">Sub Page 3></a>
</div>
<a href="s_page4.html" onmouseover="extend(4);">Fourth Page></a>
<div class="extend";>
<a style="display: none;" id="4" onmouseleave="retract(4);" href="sub/sub_page4.html">Sub Page 4></a>
</div>
<a href="s_page5.html">Fifth Page</a>
<a href="s_page6.html">Sixth Page</a>
<a href="s_page7.html">Launch Video</a>
</div>
</div>