Search code examples
csswordpresssubmenu

Submenu not clickable on hover


My submenu is not working properly. It's showing up, but if you click on the parent of the submenu, the color doesn't change. It's not even clickable, which makes me think that there's something that's blocking it. I know where the problem lies, a bit, but I don't know how I should solve it.

ul li ul {
    display: none;
    float: right;
    position: absolute;
    right: 0;
    top:-5px;
    padding-top:2em;
    padding-bottom:5px;
    z-index: 99999;
}

The top:-5px breaks it down. When I comment it out, the submenu's working, but it doesn't stick to the parent li. Someone else made this, and I am trying to solve it. Since I can't contact him, it's my job to fix this.

Link to site

Try clicking on "teams", or hover over it, then you'll see what I mean...

Edit: I have made a JSFiddle, trying to tidy the things up a bit.

It can be found here


Solution

  • It's because the ul is over the anchor element you can change it like so:

    ul li ul {
         display: none;
         position: absolute;
         right: 0;
         padding-bottom: 5px;
         z-index: 999;
         top: 12px;
         padding-top: 15px;
    }