why doesn't this drop-down menu work with mouseover and leave?

Question

I want it to display "you" under "Home" when hovering and disappearing when mouse leaving:

// HTML
<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

// javaScript
var homeB= document.getElementById("homeBox");
var homeS = document.getElementById("homeSub")
homeBox.mouseover = function() {
    var homeS = document.getElementById("homeSub").style.display= "block";
}
homeBox.mouseleave = function() {
    var homeS = document.getElementById("homeSub").style.display= "none";
}
// CSS
<style>
    ul li ul li a #homeSub {display: hidden;}
</style>

the "homeBox" is the id and the variable for it is homeB. – Marie Mirbekian Jun 02 '15 at 05:33 — Marie Mirbekian, Jun 02 '15 at 05:33

score 1 · Answer 1 · answered Jun 02 '15 at 05:42

1

Why Javascript? Use simple CSS Solution.

  ul li ul{display: none;}
  ul li:hover ul{display: block;}

DEMO

answered Jun 02 '15 at 05:42

Suresh Ponnukalai

13,820
5
34
54

score 0 · Accepted Answer · 2015-06-02T05:46:45.330

There were quite a few issues. If you have any questions let me know

homeBox.mouseover

There is no homeBox use homeB, and mouseover isnt an event handler onmouseover is.

homeB.onmouseover

ul li ul li a #homeSub {display: hidden;}

This is looking for a link with a child that has the id homeSub, and display: hidden should be display: none

ul li ul li a#homeSub {display: none;}

var homeS = document.getElementById("homeSub").style.display= "block";

You've already defined homeS

homeS.style.display = 'block';

var homeB = document.getElementById("homeBox");
var homeS = document.getElementById("homeSub");
homeB.onmouseover = function() {
    homeS.style.display = "block";
}
homeB.onmouseout = function() {
    homeS.style.display = "none";
}

ul li ul li a#homeSub {
    display: none;
}

<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

wow..this is very helpful..thanks for editing it nicely..sure ! — Marie Mirbekian, Jun 02 '15 at 05:46

Linkmichiel · Answer 3 · 2015-06-02T05:51:04.200

<ul>
<li><a id="homeBox" href="#">Home</a>
<ul><li><a id="homeSub" href="#">you</a></li></ul>
</li>
</ul>

-Use onmouseover instead of mouseover

-Put your Javascript between script-tags, and in a function that will execute after the page has loaded (and use 'none' instead of 'hidden').

<script>
(function() {
    var homeB= document.getElementById("homeBox");

    var homeS = document.getElementById("homeSub");

    homeB.onmouseover = function() {
        homeS.style.display = "block";
    }
    homeB.onmouseleave = function() {
        homeS.style.display= "none";
    }
})();
</script>

-And adjust your stylesheet:

<style>
    #homeSub {display: none;}
</style>

score 0 · Answer 4 · answered Jun 02 '15 at 05:44

0

You don't need any javascript for this functionality. Just use CSS - http://jsfiddle.net/akq1e5o6/

P.S.: there is no avaliable hidden value for display property

answered Jun 02 '15 at 05:44

Philip Dernovoy

1,169
6
17

why doesn't this drop-down menu work with mouseover and leave?

4 Answers4