Turning static css menu into "on hover"


I have a website which has bee created in Joomla:

The menu here has two sub menus, of "your needs" and "our services". The top menu is a list, and the sub menus are absolute positioned DIVs, which at the moment are static on the relevant pages.

I would like for each sub menu to show when the user hovers over the menu item. I would normally do this with javascript, but due to joomla constraints am unable. I would like siggestions on how to approach this using CSS, but i am unfamiliar with how to approach the problem. As you can image the sub menu needs to show when on the menu otem ,but also when the mouse moves between that and the sub menu without any flicker etc.

Each top menu item has an individual class, so i assume this is possible?

LVL 12
Dean OBrienAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
check this


lots of samples and free
Firstly, you need to add you sub menu into element of main menu.
<li class="item-466 current active" onmouseout="out(this);" onmouseover="over(this);">
<a href="/index.php/your-needs">....
<ul class="menu">
<li class="item-474" onmouseout="out(this);" onmouseover="over(this);" style="color: rgb(92, 65, 62);">...
<li class="item-473" onmouseout="out(this);" onmouseover="over(this);">...
<li class="item-472" onmouseout="out(this);" onmouseover="over(this);">...

Open in new window

Secondly, position sub menu as you need or as current position.
Thirdly, add rules:
li ul {display:none;}
li:hover ul {display:inline;}
That is it.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dean OBrienAuthor Commented:
Hey SSupreme,

I have done what you suggested here:

Can you suggest how to change this so that it doesnt deform the main menu when i hover? By the nature of your code, if i display it inline then it must push all the other menu items in the main menu to the right? WHereas to have it float under, i would need to display absolute?

I appreciate the help
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

You are not following instructions, I said that you need to position sub menu first, so it doesn't ruin main menu.
Then add rules.
Obviously I didn't provided How I would like it to be, it's your decision. Because your question was:
I would like for each sub menu to show when the user hovers over the menu item.
- My solution works.
I am glad that you asked how to position sub menu, but your were right:
 li:hover ul {
    display: block;
    //margin-top: 30px; Remove it
add this for absolute position (not display):
ul li ul {
    position: absolute;

It isn't the end view, you have to adjust it yourself as you like, I suggest you to switch off display:none; for a while.
easynow111, I cannot  send you an e-mail to info@suremedia.co.uk ; could you please provide working email.
Dean OBrienAuthor Commented:
Strange it should work, alternative is Dean.Obrien@unn.ac.uk cheers
Dean OBrienAuthor Commented:
Thanks for advice
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.