CSS Dropdown menu is not displaying properly

Question

I am having some kind of problem with my css and I am really frustrated over this ? HTML:

<div id="nav">
    <ul>
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">More</a></li>
                <li><a href="#">Hawa</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#nav {background: #008080;position:relative;}
#nav ul {list-style:none;display:flex;position:relative;}
#nav ul li {width: 50px;display:inline-table;padding: 10px 20px;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li:hover > ul {display: block;position:absolute;margin-left:0px;width:100%;}
#nav ul li a{text-decoration:none;font-family:Verdana;color:#fff;}
#nav ul ul {display:none;}
#nav ul ul li {background: #008080;}

My problem is :

My css drop down is not aligning with the li element.

Can anyone help me out ?

CSS Dropdown

add padding to anchors not to list check my update

Gildas.Tambo
– Gildas.Tambo

2014-09-07 10:14:41 +00:00
Commented Sep 7, 2014 at 10:14 — Gildas.Tambo
– Gildas.Tambo, Commented Sep 7, 2014 at 10:14

Kiril · Accepted Answer · 2014-09-07 10:09:48Z

2

Try this one, there was a "padding" on your submenu list

#nav ul li:hover > ul {
     display: block;
     position:absolute;
     left:0px;
     width:100%;
     padding-left:0px;
}

edited Sep 7, 2014 at 10:09

Kiril

2,9731 gold badge35 silver badges41 bronze badges

answered Sep 7, 2014 at 9:59

Ramiz Wachtler

5,6932 gold badges30 silver badges33 bronze badges

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

Comments

Akshay · Accepted Answer · 2014-09-07 10:07:42Z

2

use negative margin value http://jsfiddle.net/5tz0zszy/

I've made a bit change in the css

#nav {
background: #008080;
position:relative;
}
#nav ul {
list-style:none;
display:flex;
position:relative;
}
#nav ul li {
width: 50px;
display:inline-table;
padding: 10px 20px;
position:relative;
}
#nav ul li:hover {
background:#333;
}
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:-60px;width:100%;
}
#nav ul li a{
text-decoration:none;
font-family:Verdana;
color:#fff;
}
#nav ul ul {
display:none;
}
#nav ul ul li {
background: #008080;
}

edited Sep 7, 2014 at 10:07

answered Sep 7, 2014 at 9:57

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Comments

Gildas.Tambo · Accepted Answer · 2014-09-07 10:12:10Z

2

RESET YOUR CSS *{box-sizing:border-box;padding:0; margin:0;}

add padding to anchors not to list

DEMO

*{box-sizing:border-box;padding:0; margin:0;}
#nav {background: #008080;position:relative;}
#nav ul {display:flex;position:relative;}
#nav ul li {list-style:none;float:left;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li > ul {position:absolute;}
#nav ul li:hover > ul {display: block;}
#nav a{text-decoration:none;font-family:Verdana;color:#fff;display:block;clear:both;padding: 10px 20px;}
#nav ul ul {display:none;position: absolute;left: 0;}
#nav ul ul li {background: #008080;display:block;width:100%;}

enter image description here

edited Sep 7, 2014 at 10:12

answered Sep 7, 2014 at 9:59

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Comments

Alex Char · Accepted Answer · 2014-09-07 10:18:07Z

2

Simple add this:

#nav ul li:hover > ul {
    display: block;
    position:absolute;
    margin-left:0px;
    width:100%;
    left: 0;/*Add this*/
    padding: 0;/*Add this*/
    top: 40px;/*Add this*/
}

Also change to display: block #nav ul li {width: 50px;display:block;padding: 10px 20px;position:relative;}. Check resume menu.

fiddle

answered Sep 7, 2014 at 10:18

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

1 Comment

Naveen Niraula Over a year ago

Yeah man thanks!! but I did top:100% :). Appriciate that though !!

Collectives™ on Stack Overflow

CSS Dropdown menu is not displaying properly

4 Answers 4

Comments

Comments

DEMO

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related