CODEWITHSUNDEEP
htmlcss
yaqoob
yaqoob

Reputation: 1062

Dropdown menu didn't drop as expected

I'm having a CSS problem with my Menu.

Here is the screenshot of the dropdown menu: enter image description here

When hover The submenu it drops with the parent menu container. Please have a look and let me know whats wrong with it. Thanks for your help

Here is my css code

#menu {
    width: 100%;
    display: block;
    overflow: auto;
    background: #fff;
    box-shadow: 0px 0px 3px #999;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 20;
}

#menu li {
    display: inline-block;
    float: left;
    margin-right: 1px;
}

#menu li a {
    display: block;
    min-width: 120px;
    padding: 10px 3px;
    text-align: center;
    line-height: 32px;
    font: bold 16px Lato, Helvetica, Arial, sans-serif;
    color: #333;
    background: #fff;
    text-decoration: none;
    border-right: 1px solid #ececec;
    text-transform: uppercase;
}

#menu li a:hover {
    background: #ececec;
}

/*
Sub Menu (drop down)
*/

#menu li ul {
    display: none;
}

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

#menu li ul li:hover {
    background: yellow;
    display: block;
    float: none;
    top: 50px;
}

#menu li ul li a {
    background: yellow;
    width: 150px;
    top: 50px;
    min-width: 100px;
    padding: 0 20px;
    text-transform: none;
}

#menu li:hover ul {
    width: 150px;
    display: block;
    opacity: 1;
    visibility: visible;
}

And here is the Working Fiddle: http://jsfiddle.net/Fc69z/

Upvotes: 1

Views: 54

Answers (2)

tgogos
tgogos

Reputation: 25152

demo
I added this css:

#menu ul {
 list-style:none;
 position:fixed;
 display: inline-table;
}

Upvotes: 1

Prasanth K C
Prasanth K C

Reputation: 7332

Try adding position:absolute to the child ul, Like this,

#menu li:hover ul { 
width:150px; 
display: block; 
opacity: 1;  
visibility: visible; 
position:absolute; 
}

FIDDLE HERE >>

Upvotes: 0

Related Questions