css - 选择子菜单项时，suckerfish 顶级元素保持突出显示

Question

我在 joomla 网站上设置了一个 suckerfish 下拉菜单，但我找不到一种方法来保持顶级菜单项被选中(在这种情况下变为红色并保持红色)- 在您选择子菜单后元素。

将鼠标悬停在顶级元素上很好，当您将鼠标悬停在子菜单上时它会保持悬停颜色 - 但是一旦您单击子菜单项，顶级元素就会恢复为原始颜色。

这意味着访问者不一定知道他们在网站的哪个部分。

所以任何帮助都会很棒!谢谢。

我当前的 CSS 是:

#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;}

Answer 1

您需要使用 javascript 或服务器端编程向父 LI 添加一个表示它处于事件状态的类，然后使用 CSS 获取该类并应用视觉样式。