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:

enter image description here

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

StackOverflow is a site for specific code problems. If you also want help reviewing the quality of your code, consider CodeReview.StackExchange for that, instead. — TylerH
– TylerH, Commented Jul 30, 2014 at 17:40

Serlite · Accepted Answer · 2014-07-30 17:47:21Z

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.)

answered Jul 30, 2014 at 17:47

Serlite

12.3k5 gold badges40 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Expent Over a year ago

And how can i make the dropdown list display exact under it because the list is a little shifted toward right and thanks again

Serlite Over a year ago

Sure, that's just a matter of removing the fixed width on the submenu anchor tag. #menu ul ul li a{ width:auto; } resolves that issue in this case.

Serlite Over a year ago

Okay, I changed a slew of styles and altered the way the dropdown is positioned. To summarize: Removed all float:left on <ul>, removed position:relative on <a>, added position:relative to <li>, and altered the positioning of the submenu so it uses left/top rather than padding to be positioned. The submenu items are now centered in a dropdown below the main menu item. jsfiddle.net/yZMFL/2

Serlite Over a year ago

Hmm, can you mock up a JSFiddle and/or provide a screenshot for that? It's a bit difficult to troubleshoot just by that description.

Serlite Over a year ago

Right ah, how does it look right now though? I'm just not sure what kind of bug you're looking at.

|

Collectives™ on Stack Overflow

CSS bug with drop down Menu

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related