0

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>
        <a href="index-1.html">Store</a>
        <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><a href="index-2.html" class="active">About Us</a></li>
    <li><a href="index-3.html">Contact</a></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/

1 Answer 1

0

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!.

19
  • Hi jmeas, Thank you for replying. when I take out the position: absolute, everything moves to the side of the menu :( . Any further suggestions? I really want to keep the code I have, and tweak it.
    – iamspace
    Oct 11, 2012 at 4:02
  • Hey man, I'll fix it up for you and post the code. Give me a minute. Oct 11, 2012 at 4:02
  • Okay, I've fixed it up just a bit more for you. It's almost there; maybe you'll be able to take it from here? But if you need more help, please don't hesitate to ask. Oct 11, 2012 at 4:21
  • I'm not sure what I'm doing wrong, but you're a smart guy. could you post the CSS in its entirety?
    – iamspace
    Oct 11, 2012 at 4:32
  • hmmm, the padding-top is to center it on the div.... Jmeas, I tried what you commented, and I truly appreciate it, but it will not work for me. Does it work for you?
    – iamspace
    Oct 11, 2012 at 4:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.