Why does my css menu have text overlapping on drop down - html

Question

I can't get my drop down menu (sub-menu) to stop overlapping the text. Below is my HTML + CSS.
<ul class="top-menu">
<li><a href="index.html" >Events </a></li>
<li>
Store
<ul>
<li><a href="index-2.html" >Imagination CD</a></li>
<li><a href="index-2.html" >Total Relax</a></li>
<li><a href="index-2.html" >Super Study</a></li>
</ul>
</li>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
.top-menu {
position: absolute;
padding: 32px 00 0 10px;
height: 85px;
}
.top-menu li{
padding:0 24px 0 0;
}
.top-menu li, .top-menu li a{
display:block;
float:left;
}
.top-menu ul, .top-menu ul a{
position: absolute;
display: none;
z-index:999px;
line-height: 30px;
top: 12px;
}
.top-menu li a{
padding:0 0 0 30px;
color:#4d3925;
font-size:25px;
line-height:26px;
text-decoration:none;
}
.top-menu a:hover, .top-menu .active {
color:#f29869;
}
.top-menu li:hover ul a, .top-menu li:hover ul {
position: abolute;
display: block;
padding: 32px 0 0 14px;
font-size: 16px;
line-height: 30px;
z-index: 999px;
}
reference menu: http://www.nicoheins.com/lux/

Answer 1

There are a number of issues with this dropdown. However, the one that's causing this particular problem is the attribute position:absolute; in your selector .top-menu ul, .top-menu ul a. Once you get rid of that, your links will no longer stack on top of eachother.
But you'll still need to do more work to get your menu looking fresh.
Not to plug my own work, but I've got a pretty decent dropdown (I think, at least) that you can use hosted over at Github. Check it out here. If you don't want the fade or arrows, you can just remove those, then apply your own style. The rest should work as you want it to.
Edits to fix other issues:
Again, the original question just asks to solve one of the problems I noted with this dropdown. Another is the fact that your submenu ul is pushing the parents lis to the right. You can fix this by applying this styling:
.top-menu > li {
position: relative;
}
.top-menu li ul {
position: absolute;
}
Another is the fact that your all of your lis are styled to float:left;. You only want the top level lis to be styled in this way. This is cased by this section:
.top-menu li, .top-menu li a{
display:block;
float:left;
}
Changing this to
.top-menu > li, .top-menu > li > a{
display:block;
float:left;
}
will fix that, but then you'll need to re-apply the display:block; to the submenu as.
I imagine your next concern would be regarding the huge spacing between the submenu as. This is because you're targeting them with this code:
.top-menu li:hover ul a, .top-menu li:hover ul {
position: abolute;
display: block;
padding: 32px 0 0 14px;
font-size: 16px;
z-index: 999px;
}
That padding-top is quite large! Be sure your selectors are only selecting what you want, or you'll end up getting strange behavior like this. This is particular important when you're working with something like a dropdown, which has lis inside of lis, and they need to be styled completely different from one another.
For a good overview of selectors, check out this page.
A functional version of this is here. Please note that I tried to change the original css as little as possible. I think this has restricted my ability to write the best possible dropdown that I think I can write. But this does work!
Here's a JSFiddle with rewritten code that works completely and cleanly!.