CSS下拉菜单-重叠元素

Question

I've made a drop-down menu but when I hover over a parent category, the children appear crowded and overlapping. It seems the children 'elements' are not being placed neatly one below the other; rather, they overlap each other.

I've tried fixing it myself and looking at google and here, but I didn't find any solution that solves this issue. I've also read "Inline elements and padding" guide, but it didn't help me. I'm not a programmer, I'm just doing some customizing of a purchased theme ( http://meros11.gostorego.com/ ).

Any help would be appreciated.

Do I need to post all my code, or can you see it yourself using the developer tools? (such as in Chrome)

Thanks!

Answer 1

The issue is with this class, which is applying to all of the menu elements:

#nav li.parent a span {
    margin-top: -10px;  /* This is what's making them crowded */
}

Looking at the style of your nav menu, this style should only apply to the top level li elements (Example Category, Family Tree, Marriages), but it is applying to all of your a elements.

I would change the name of this id to a class (remove the "#nav li.parent a span" and replace with ".[your class name here]" then apply that class to the top level li elements (Example Category, Family Tree, Marriages).

Change

<li class="level0 nav-1 level-top first parent hasProducts">

to

<li class="level0 nav-1 level-top first parent hasProducts [YOUR CLASS HERE]">

Then in your CSS:

change

#nav li.parent a span {
    margin-top: -10px;
}

to

.[YOUR CLASS HERE]{
    margin-top:-10px;
}