Issue With Multi Level CSS Menu

HTML & CSS
1

I have added a multi level dropdown menu on the following linked page:

LINK-

The issue is visible when you rollover the “Services” tab in the main menu, which displays a sub menu. The sub menu has an additional menu listed under the “Therapy” tab which does reveal the tertiary menu of “Hand, Physical and Occupational” but the alignment is off. The top of that tertiary menu is bumped down below the button I would choose to have it aligned with. Can someone else take a look and let me know how to align the tertiary menu list items along side its parent button?

Thanks in advance!
Todd

2

Hi Todd, can you give your css code so I can look through it?

…

I found your CSS and the problem seems to me at this part of your css:

#nav .services ul .multi span { padding: 0 0 0 150px; }

The class for Therapy is multi. From what I can tell you didn’t specify where it should go as you did the other classes. Add something like this. Just play around with the numbers until it lines up to the correct category:

{ background-position: -884px -245px; width: 100px; margin: 0 0 0 1px; }

3

The CSS is embedded in the same document. You can find it inside the <head> tags. Hope this helps!

4

Try removing this from your styles (line 29 in the head):

#nav li li {
float: none;
[COLOR="#FF0000"]position: static;[/COLOR]
display: block;
font-family: Arial, Helvetica, sans-serif;
}

and this, line 32:


#nav ul ul {
[COLOR="#FF0000"]top: auto !important;[/COLOR]
}

and use this instead:

#nav ul li {position:relative;}
#nav ul ul {top: 0;}
5

That did the trick! Thanks so much ralph.m! I really appreciate it. You have helped me out so many times… well, you and Paul O’B! Thanks again.

6

You’re welcome. :slight_smile: