How can i use the visibility attribute in css to make my submenu appear and reappear?

Question

i have created a submenu for a div that will show when the div is hovered over. However the submenu sticks and i want it to disappear when the cursor is removed from the div. I've decided to use the css attribute "visibility" but not entirely sure what would work best for it, How can i use the visibility attribute in css to make the submenu appear and reappear ?

Heres the Javascript(DOM):

var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";
var creatlbl = document.createElement("label");
creatlbl.innerHTML = "Hover Over Me ";

creatbtndiv.appendChild(creatlbl);
creatbtndiv.appendChild(creatbtn);

document.body.appendChild(creatbtndiv);



var list = function () {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for (index = 0; index < 5; ++index) {
        li = document.createElement("li");
        li.className = "list";
        li.innerHTML = "Submenu" + index;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);
    document.body.appendChild(creatDiv);

    /*creatDiv.onmouseout = function(){
    //var confirm = confirm("the mouse is out");
    this.parentNode.removeChild(this);
    };*/


};
//If the cursor hovers over the label, activate this function//


creatlbl.onmouseover = function () {
    var alert = confirm("yes master");
    list();
    if (creatlbl.onmouseover === true) {
        creatDiv.className = "visible";
    } else {
        creatDiv.className = "hidden";
    }

Heres the CSS:

label {
    background-color: red;
    padding:5px;
}
ul {
    margin:0;
    padding:5px;
    background-color:#A1CF9F;
    display: inline-block;
    list-style-type: none;
    color:#C0C0C0;
    font-size:19px;
    border-radius:5px;
    /*visibility: hidden;
    /*border: 2px dashed green; This lets me know where the div is*/
}
.divContainer {
    text-align:center;
}
table {
    margin:0 auto;
}
.list {
    border: 2px solid #A1CF9F;
    background-color:#F0F5F0;
    padding: 5px;
}
.list:hover {
    background-color: blue;
    color:white;
}

.visible {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}

Hope anyone can help !!

};

Answer 1

Have you tried display:none; for when the user is no longer hovering over the div?