Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 410
  • Last Modified:

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?

Dean OBrien
Dean OBrien
  • 3
  • 3
2 Solutions
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.
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now