Struggling to get this dropdown menu functioning properly. Seeking ways to increase spacing between the menus through padding and the ::after selector.
HTML:
<div id="menu">
<div id="wrapper">
<ul class="navbar">
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Hej 1</a></li>
<li><a href="#">Hej 2</a></li>
<li><a href="#">Hej 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body {
background-color: #efefef;
}
#menu{
height:auto;
position: absolute;
margin: 0px;
}
#wrapper{
position:absolute;
top: 0px;
left:0px;
height: auto;
margin: 0px;
}
#wrapper ul{
margin:0px;
padding: 0px;
height: auto;
width: auto;
background-color: #fff;
border-radius: 8px;
}
#wrapper ul li,#wrapper ul li a, #wrapper ul li ul li, #wrapper li ul li a{
position: relative;
list-style: none;
display: inline-block;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
color: #808285;
padding: 3px 10px 3px 10px;
transition: all 0.3s ease 0s;
}
#wrapper ul li ul{
display: none;
position: absolute;
top: 20px;
margin-top: 20px;
right: -30px;
width: 150px;
background-color: #FFFFFF;
border-radius: 0px;
transition: all 0.3s ease 0s;
border-radius: 8px;
left: 5px;
}
#wrapper ul li ul li{
position: relative;
top: auto;
left: 0px;
height: auto;
width: 150px;
list-style: none;
display: list-item;
padding: 3px 5px 3px 5px;
margin-top: 5px;
}
#wrapper ul li a:hover, #wrapper ul li ul li a:hover{
color: #ba141a;
}
#wrapper ul li:hover ul{
display: block;
}
#wrapper ul li ul li:hover{
width: 132px;
}
See it in action: http://jsfiddle.net/yMvg9/1/
Can anyone identify the issue here?