Submenu appears right away on the page, but disappears when mouse goes over the main menu item

Question

hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...

HTML:

<div id="container">
    <div id="menu">
        <ul id="nav">
            <ul>
                <li id="menu1"><a href=""><h2>Home</h2></a></li>
                <li id="menu2"><a href=""><h2>Sign-Up</h2></a></li>
                <li id="menu3"><a href=""><h2>Packages</h2></a>
                    <ul>
                        <li><a href="#">Gold</a></li>
                        <li><a href="#">Platinum</a></li>
                    </ul>
                </li>
                <li id="menu4"><a href=""><h2>About Us</h2></a></li>
                <li id="menu5"><a href=""><h2>Contact</h2></a></li>
            </ul>
        </ul>
    </div>

CSS:

* {
    margin:0px;
    padding:0px;
} 

.form-textbox{
    height:100px;
    font-size:100px;
}

#fieldset{
    width:300px;
}

#fieldst p{
    clear:both;
    padding:5px;
}

#legend{
    font-size:16px;
}

label[for="username"] {
    color:#FFFFFF;
    font-weight:bold;
    clear:both;
    text-align:left;
}

label[for="password"] {
    color:#FFFFFF;
    font-weight:bold;
    clear: both;
    text-align:left;
    margin-top:40px;
}

body {
    padding-top:0px;
    background-color:#01111d;
    color:#FFF;
    font-family:verdana, arial, sans-serif;
    text-align: left;
    letter-spacing: 1px;
}

a {
    color: #FFF;
    font-size: 14px;
}

a:hover {
    color:#efae00;
}  //01a9c0

.more {
    float:left;
}

.clear {
    clear:both;
}

p {
    margin: 20px 0px 20px 0px;
    line-height: 16px;
    font-size: 14px;
}

#container {
    margin: 0px auto;
    width: 873px;
}

#menu {
    background-image:url(images/menu.gif);
    width:862px;
    height:90px;
    position:relative;
    z-index:99999;
}

#menu li{
    position:absolute;
    top:40px;
    list-style-type:none;
}

#menu1 {
    left:110px;
}

#menu2 {
    left:255px;
}

#menu3 {
    left:400px;
}

#menu4 {
    left:540px;
}

#menu5 {
    left:680px;
}

#menu a {
    font-family: verdana, arial, sans-serif;
    font-size:12px;
    font-weight:bolder;
    color:#FFFFFF;
    text-decoration:none;
    text-transform:uppercase;
}

#menu a:hover {
    color:#efae00;
} 

#menu li > #nav li ul

#nav li ul {
    position:absolute; 
    display:none;
} 

#nav li:hover ul { 
    display: none;
}


#nav li ul li { 
    float: none; 
    display: block;
}

#nav li ul li a { 
    width: 118px; 
    position: absolute; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    background: #333; 
    color: #fff; 
}

#nav li ul li a:hover { 
    background: #066; 
    color: #000; 
}

Jsfiddle here: http://jsfiddle.net/bC7f2/

Answer 1

So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:

#nav ul li:hover ul #ITEM NAME HERE

#nav li ul # ITEM NAME HERE

Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:

#nav ul li:hover ul #item1 {
    display: none;
    position: absolute;
    z-index: 100;
    display: inline-block;
    top: 20px;
}
#nav ul li:hover ul #item2 {
    /* display: none; */
    position: relative;
    z-index:1;
    display: block;
    top: 13px;

}
#nav ul li:hover ul #item3 {
    /* display: none; */
    position: relative;
    z-index:0;
    display: block;
    top: 27px;

}
#nav li ul #item1 {
    z-index:100;
    display:none;
}
#nav li ul #item2 {
    z-index:1;
    display:none;
}
#nav li ul #item3 {
    z-index:0;
    display:none;
}

I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.

I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).

Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.

To break down my additions, I will split it up into sections really fast:

Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.

Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.

Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.