Turning static css menu into "on hover"

Posted on 2011-10-05
Last Modified: 2012-05-12

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?

Question by:Dean OBrien
    LVL 51

    Assisted Solution

    check this

    lots of samples and free
    LVL 16

    Accepted Solution

    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.
    LVL 12

    Author Comment

    by:Dean OBrien
    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
    LVL 16

    Expert Comment

    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.
    LVL 16

    Expert Comment

    easynow111, I cannot  send you an e-mail to ; could you please provide working email.
    LVL 12

    Author Comment

    by:Dean OBrien
    Strange it should work, alternative is cheers
    LVL 12

    Author Closing Comment

    by:Dean OBrien
    Thanks for advice

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now