JavaScript: Cannot set display to none, because it sets itself to block

Question

I have a dropdown menu with items in it, im trying to make it so that when you pass over a sertain item a second one apears bellow it and when you aren't hovering over either it goes away. The problem is if you go up with the cursor it calls extend again and the second item doesnt disapear. How can I fix it?

Thanks in advance! (the item has its display set to none by default)

I've tried to seperate the items so that the first one doesnt toggle the second one again but I've failed to do so with javascript. https://i.sstatic.net/nkzP7.jpg

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;
}

The dropdown is created in 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>

Answer 1

Try to keep styling in your CSS. CSS is pretty powerful if you use it right. Use the :hover pseudo selector to set the styles of an item when it is being hovered. And since you have a sibling element you want to target use the + selector to select the adjacent element that needs to be manipulated.

.dropdown-content a {
  display: block;
  padding: 15px;
  background: #111111;
  color: white;
  text-decoration: none;
}

.dropdown-content .extend a {
  display: none;
  background-color: #383838;
  color: white;
}

.dropdown-content > a:hover + .extend a,
.dropdown-content .extend a:hover{
  display: block;
}

<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">StarLink Concerns ></a>
    <div class="extend">
        <a id="1" href="sub/sub_page1.html">SpaceX ></a>
    </div>
    <a href="s_page2.html">Second Page></a>
    <div class="extend">
        <a id="2" href="sub/sub_page2.html">Sub Page 2></a>
    </div>
    <a href="s_page3.html">Third Page></a>
    <div class="extend">
        <a id="3" href="sub/sub_page3.html">Sub Page 3></a>
    </div>
    <a href="s_page4.html">Fourth Page></a>
    <div class="extend">
        <a id="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>