CSS bug with drop down Menu

Question

When i hover over the Gallery its displays the sub menu list next to each other but i wnat the sub 1 and 2 display below each other so its a dropdown. And how could i improve this code and is ther any cod that i dont need in it.

Here is the picture:

HTML:

<div id="menu_wrapper">
<div id="menu">
    <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#" target="_parent">Gallery</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#" target="_parent">Plants</a></li>
        <li><a href="#" target="_parent">News</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>     

    </div> <!-- end of menu -->
</div><!-- end of menu_wrapper -->

CSS

    /*
CSS
*/
#menu_wrapper {
    width: 100%;
    height: 80px;
    margin: 0 auto; 
    background: url(menu_bar.jpg) no-repeat center top;
}

#menu {
    width: 900px;
    height: 80px;
    margin: 0 auto;
    background: url(menu_bar.jpg) no-repeat center top; 
}

#menu ul {
    float: left;
    margin: 0px;
    padding: 30px 0 0 150px;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu ul li a {
    position: relative;
    float: left;
    display: block;
    width: 115px;
    height: 30px;
    padding: 5px 0 0 0;
    margin-right: 10px;
    text-align: center;
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    color: #eee901; 
    font-weight: bold;
    outline: none;
    background: url(menu_item.png) no-repeat;
}

#menu li a:hover, #menu li .current {
    color: #FFF;
}

#menu ul ul {
    display:none;
    position:absolute;
    text-align:left;
    float:left;
}
#nav ul ul li {
    display:block;
}

#menu ul li:hover ul {
    display:block;
}
#menu ul li:hover ul li{
    style:none;
}

Answer 1

Your CSS to get the behaviour you're looking for is almost correct - it just seems that you've written the wrong id for one of your CSS selectors.

Where you have:

#nav ul ul li {
    display:block;
}

You should have:

#menu ul ul li {
    display:block;
}

This style overrides the display:inline you set elsewhere in your CSS, and causes the submenu items to stack. Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

(With regards to code improvements...well, you don't seem to need to specify float:left on your <ul> elements. Although what you need and don't need can vary depending on the broader context of your website.)