CODEWITHSUNDEEP
csssuckerfish
user1870807
user1870807

Reputation: 29

suckerfish top level item stay highlighted when sub menu item selected

i have set up a suckerfish drop down menu on a joomla site but i can't find a way to keep the top level menu item selected (in this case to turn red and stay red) - after you select a sub menu item.

hovering the top level item is fine and it remains the hovered colour whilst you are mousing over the sub menu - however as soon as you click the sub menu item then the top level item reverts back to the original colour.

this means that visitors won't necessarily know which section of the website they are on.

so any help would be GREAT! thanks.

my current css is:

#mainlevelmainnav, #mainlevelmainnav ul {float: right;list-style: none;line-height: 1;}
#mainlevelmainnav a {display: block;}
#mainlevelmainnav li {float: left;padding: 0;margin-right:20px;font-size: 14px;color: #B8A4AA}
#mainlevelmainnav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 14em;
    w\idth: 13.9em;
    font-weight: normal;
    border-width: 0.25em;
    margin: 0;
    z-index:1;
    padding-top:60px;
    background-color:rgba(255,255,255,0.9);
    z-index:2;
}

#mainlevelmainnav li ul li {margin-bottom:15px; padding-left:5px}
#mainlevelmainnav li li {padding-right: 1em;list-style:none;background:none;width: 18em;}
#mainlevelmainnav li ul a {width: 18em;w\idth: 17.6em;}
#mainlevelmainnav li ul ul {margin: -1.75em 0 0 12em;background:#e7e7e7 url(../images/menu_li.gif) top right;}
#mainlevelmainnav li:hover ul ul, #mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul, #mainlevelmainnav li.sfhover ul ul ul {  left: -999em;}
#mainlevelmainnav li:hover ul, #mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul, #mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul, #mainlevelmainnav li li li.sfhover ul {left: auto;}
#mainlevelmainnav li:hover, #mainlevelmainnav li.sfhover {}
#mainlevelmainnav ul.menu {margin:0;}
#mainlevelmainnav ul.menu li {background:#e7e7e7 url(../images/menu_li.gif) top right no-repeat;}
#mainlevelmainnav ul.menu li a {color: #656565;padding: 2px 0;display: block;text-decoration: none;outline: none;background:none}
#mainlevelmainnav ul.menu li a span,
#mainlevelmainnav ul.menu li li a span{padding: 0 15px;background: none;}
#mainlevelmainnav ul.menu li li li a:hover,
#mainlevelmainnav ul.menu li li li a:active,
#mainlevelmainnav ul.menu li li li a:focus,
#mainlevelmainnav ul.menu li li a:hover,
#mainlevelmainnav ul.menu li li a:active,
#mainlevelmainnav ul.menu li li a:focus,
#mainlevelmainnav ul.menu li a:hover,
#mainlevelmainnav ul.menu li a:active,
#mainlevelmainnav ul.menu li a:focus,
#mainlevelmainnav ul.menu li:hover,
#mainlevelmainnav ul.menu li:active,
#mainlevelmainnav ul.menu li:focus {background:#dadada!important;color: #000;text-decoration: none;}
#mainlevelmainnav ul.menu li.active a {font-weight: bold;text-decoration: none;}
#mainlevelmainnav ul.menu li .parent{background:#dadada url(../images/menu_sub_arrow.gif) center right no-repeat;}
#mainlevelmainnav ul.menu li.active a span {}
#mainlevelmainnav ul.menu li li a span {padding: 0;background: none;}
#mainlevelmainnav ul.menu li ul {border:1px solid #cccccc;padding: 0;list-style: none;}
#mainlevelmainnav ul.menu li li {padding: 0!important;list-style: none;}
#mainlevelmainnav ul.menu li li a {color: #333333;font-size: 92%;font-weight: normal;padding:0 10px;}
#mainlevelmainnav ul.menu li li a:hover,
#mainlevelmainnav ul.menu li li a:active,
#mainlevelmainnav ul.menu li li a:focus {}
#mainlevelmainnav ul.menu li li a span {font-weight: normal;}

Upvotes: 1

Views: 241

Answers (1)

Matthew Darnell
Matthew Darnell

Reputation: 4588

You would need to use javascript or server side programming to add a class to the parent LI that says it's active, then use CSS to pickup that class and apply the visual style.

Upvotes: 0

Related Questions