title: suckerfish top level item stay highlighted when sub menu item selected
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>this means that visitors won't necessarily know which section of the website they are on.</p>
  
  <p>so any help would be GREAT! thanks.</p>
  
  <p>my current css is:</p>
  
  <pre><code>#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;}
  </code></pre>