CSS dropdown menu is not displayed correctly
I have some kind of problem with my css and am I really frustrated about 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:
- My css drop down is not aligned with the li element.
Can anyone help me?
+3
source to share
4 answers
use negative margin value http://jsfiddle.net/5tz0zszy/
I changed the css a bit
#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;
}
+2
source to share
RESET YOUR CSS *{box-sizing:border-box;padding:0; margin:0;}
add addition to anchors
not tolist
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%;}
+2
source to share
Just 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 the resume menu.
+2
source to share