Aligning a sub menu css

[ChrisL_57]

Hi,
Under the 'menu' option on my site i need the links to appear side by side rather than one above the other?
Any tips?

My site is here

[jerry62704]

It's up to you what you want the site to look like. You have a bigger problem that the submenu items dont all appear unless you scroll over them.

You should look to the CSS again with an eye to reduce the need for so many different classes on one thing, but YMMV.

It takes too long to figure out why the menu is only partially shown given all those classes to wade through.

Good luck.

[Excavator]

Hello ChrisL_57,
Your menu items will show fine once you get them to display side by side. The reason you can't see them till you hover over them is the li's that go beyond the 60px height of dropped ul are white text over that #eeeeee background.

To make your dropped li's side by side, you would need to float them. Much like you did the li's in the parent ul.

.../edit I see now you are floating the dropped li's. The problem is the 100% width. If the li is the full width of the ul, there is no room for another li to sit alongside.

Try giving your dropped li's a width like this -

#main-menu .menu ul li {
    width: 100px;
}

A much simpler menu example can be seen here. Might give you some ideas.


.

[ChrisL_57]

Thank you for your help Excavator.
That's done the trick!