Axe Rescheek sub menus

[fernt]

I'm currently hosting my test site locally, so forgive me for not being able to provide a better example than my screenshot and the Edugeek Joomla demo site.

Using the Axe Rescheek theme, does anybody know of a CSS fix so that sub menus within the main menu at the top?

To use the Edugeek Joomla demo site as an example, let's say that I want to create a sub menu when I hover over the History option on the Curriculum menu to show 3 more options - say, Facilities, Homework and Timetable.

I know how to set this up through the backend, but when I try it out (and in all browsers), these 3 options would appear elsewhere - in this case, probably floating just over the News menu option.

There's a better example in my screenshot. I want to be able to hover over Sales in the SPA menu and have the Instrument Sales option appear just to the right, instead of over the Contact Us menu.

I presume other people have had this problem? How have people got around this? Any ideas for a CSS fix?

Thanks in advance.

[DirtySnipe]

I have noticed that the submenus appear but they are out of alignment (too high).

[Edu-IT]

On a slightly related note has anyone worked out how to use a full width header without breaking the navigation in IE6?

[fernt]

Thanks DirtySnape - your screenshot has made me realise that the problem is not as bad as I'd originally thought.

My screenshot shows a bad example, and if I'd been a bit less lazy and had constructed a fuller menu like yours then I would've noticed that the sub menu isn't actually too far away from where I want it to be.

I'll post a fix when I have a proper look at the CSS, but thankfully it's going to be a lot easier than I'd envisaged.

[DirtySnipe]

Im still having submenu issues.

Any fix?

[fernt]

Im still having submenu issues.

Any fix?

I've completely redesigned my menus a lot since I first posted in February, but to get your alignment right you need to fiddle with the first and last numbers in the following in suffix.css:

#topmenu ul li ul ul {
margin: -40px 0 0 16em;
}

What you need to change them to will depend on any other alterations you've made to the design of your menus (such as the width of each column), but with a bit of experimentation you'll see what's what.

This article seems to have been used as a basis for the menu system and can help you understand how it's been built up:

Son of Suckerfish Dropdowns | HTML Dog