New to the community? Start here

A way to force drop-down menus always open?

I have a client that would like multi-lined menus like this: ITEM 1, ITEM 2 ITEM 3

ITEM1 ITEM2 ITEM3

ITEM4

ITEM5

Her theme currently has drop down menus and I realized the easiest way to do this would be to create Item 1 with multiple drop downs and simply figure out how to keep all menu items open instead of waiting for a hover to open.

Any ideas on how to do this would be great.

Sun, 19 Feb 2012 0:55:07
  • coreyallen
    • Design Lord, Child of Thor

    So..for me to get the desired result I’d simply look at the CSS and remove the hover?

    Example:

    #nav, #menu-top-nav{

    display: inline-block;

    float: right;

    width: auto;

    height: auto;

    }

    #menu-top-nav{

    margin-top: 14px;

    }

    #menu-top-nav li{

    position: relative;

    line-height: 1;

    height: 14px;

    font-size: 14px;

    display: block;

    }

    #menu-top-nav li.nav-portfolio{

    padding-right: 11px;

    background: transparent url(‘img/arrow-down.png’:wink: no-repeat right 5px;

    }

    #menu-top-nav li.nav-portfolio:hover{

    background: transparent url(‘img/arrow-down-red.png’:wink: no-repeat right 5px;

    }

    #menu-top-nav li:hover > ul{

    display: block;

    }

    #menu-top-nav li ul{

    right: 0;

    top: 14px;

    text-align: right;

    }

    #menu-top-nav li a{

    text-transform: uppercase;

    color: #000;

    font-size: 14px;

    font-weight: bold;

    }

    #menu-top-nav li a:hover{

    color: #EC2A46;

    }

    #menu-top-nav > li{

    margin: 0 0 0 8px;

    float: left;

    }

    #menu-top-nav > li ul{

    position: absolute;

    display: none;

    width: 250px;

    }

    #menu-top-nav > li ul li{

    padding-right: 11px;

    }

    #menu-top-nav .current_page_item > a{

    color: #EC2A46;

    }

    #portfolio-menu ul{

    display: block !important;

    }

  • aecnu
    • WP Unicorn

    Greetings coreyallen,

    Thank you for being a WPMU Dev member!

    Once again riyaku’s answers were spot on to the resolution of this thread.

    Cheers, Joe :slight_smile:

    If this thread is not resolved because the suggested action did not work or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the ‘Mark as Not Resolved (re-open)’ box below the post area (or else we’ll miss it!)

  • coreyallen
    • Design Lord, Child of Thor

    Thanks for the reply (I’m sure it’s obvious I’m quite new at CSS).

    I could not seem to find any “.hover” text other than this: in the main.js

    $menuParent.hover(

    function(){

    $(this).css(‘overflow’,’visible’:wink:;

    }

    ,

    function(){

    $(this).css(‘overflow’,’hidden’:wink:;

    });

    Removing the .hover here simply prevents anything from happening when hovering.

    Any ideas on where else I should look?

  • coreyallen
    • Design Lord, Child of Thor

    Certainly

    I’ve made a copy of my friend’s site on my test server. You can see it here:

    http://is.gd/8XY04J

    Basically when you hover over the “portfolio”menu item you can see multiple menu items. She want’s all of those items to be open at all times (along with any other menu items she may want in the future.)

    Thanks again so much for the help.

  • Han
    • The Crimson Coder

    Can you try this,

    – edit themes/natashagornik/style.css line 425

    – add “overflow: visible !important;” into the class so it become,

    #menu-top-nav li.nav-portfolio {
    
background: url("img/arrow-down.png") no-repeat scroll right 5px transparent;
    
overflow: visible !important;
    
padding-right: 11px;
    
}

    This should solve your problem. Let me know if that’s not the case :slight_smile:

  • coreyallen
    • Design Lord, Child of Thor

    Ok so I having a few new issues related to this (and yes I’m working with a custom template someone else created)

    First off, ellipsis do not display in the menu “…”

    Also..

    So the menu currently looks like this

    Item1 Item 2 Item 3

    Sub1

    Sub2

    Sub3

    Now, if I go into the menu options and create a new item called Item A and Move it so it should come before Item1 it doesn’t appear unless I create a submenu item then the submenu item will display :

    ItemA

    Item A

    I also notice that if I have something before Item 1 then the “overflow (overflow: visible !important:wink: Doesn’t work anymore.

    Here’s the CSS:

    #nav ul{
    
list-style-type: none;
    
}
    

    
#nav, #menu-top-nav{
    
display: inline-block;
    
float: right;
    
width: auto;
    
height: auto;
    
}
    

    
#menu-top-nav{
    
margin-top: 14px;
    
}
    
#menu-top-nav li{
    
position: relative;
    
line-height: 1;
    
height: 14px;
    
font-size: 14px;
    
display: block;
    
}
    
#menu-top-nav li.nav-portfolio{
    
padding-right: 11px;
    
overflow: visible !important;
    
background: transparent url('img/arrow-down.png') no-repeat right 5px;
    
}
    
#menu-top-nav li.nav-portfolio:hover{
    
background: transparent url('img/arrow-down-red.png') no-repeat right 5px;
    
}
    
#menu-top-nav li:hover > ul{
    
display: block;
    
}
    
#menu-top-nav li ul{
    
right: 0;
    
top: 14px;
    
text-align: right;
    
}
    

    
#menu-top-nav li a{
    
text-transform: uppercase;
    
color: #000;
    
font-size: 14px;
    
font-weight: bold;
    
}
    
#menu-top-nav li a:hover{
    
color: #EC2A46;
    
}
    

    
#menu-top-nav > li{
    
margin: 0 0 0 8px;
    
float: left;
    
}
    
#menu-top-nav > li ul{
    
position: absolute;
    
display: none;
    
width: 250px;
    
}
    
#menu-top-nav > li ul li{
    
padding-right: 11px;
    
}
    

    
#menu-top-nav .current_page_item > a{
    
color: #EC2A46;
    
}
    

    
#portfolio-menu ul{
    
display: block !important;
    
}

    Any help would be much appreciated.

  • coreyallen
    • Design Lord, Child of Thor

    Thanks for this.

    This fixed the issue with the menus not respecting the “overflow”.

    The only way I know how to make an ellipsis is with three periods. Is there a different way in the Apperance | Menus section to enter three dots instead of three periods?

    Thanks a ton.