0

我在 joomla 模板中有一个菜单，当您悬停链接时，链接会突出显示。我想知道如何让父母在将鼠标悬停在孩子上时保持这种状态（子菜单）。

我当前的代码：HTML

<div id="navigation">                             
<ul class="menu ">
<li class="item-101 current active">
<a href="/" ><span class="menutitle">Home</span><span class="menudesc"></span></a></li>
<li class="item-107 deeper parent"><a href="/index.php/jamie" ><span class="menutitle">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i></a>
<ul class="sub-menu"><li class="item-108"><a href="/index.php/jamie/photos" ><span class="menutitle">Photos</span> <span class="menudesc"></span></a></li>
<li class="item-109"><a href="/index.php/jamie/thoughts" ><span class="menutitle">Thoughts</span> <span class="menudesc"></span></a></li></ul></li>
<li class="item-110"><a href="/index.php/mike" ><span class="menutitle">Mike</span> <span class="menudesc"></span></a></li>
<li class="item-111"><a href="/index.php/john" ><span class="menutitle">John</span> <span class="menudesc"></span></a></li>
<li class="item-112 deeper parent"><a href="/index.php/carrie" ><span class="menutitle">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i></a>
<ul class="sub-menu"><li class="item-113"><a href="/index.php/carrie/pictures" ><span class="menutitle">Pictures</span> <span class="menudesc"></span></a></li>
<li class="item-114"><a href="/index.php/carrie/thoughts" ><span class="menutitle">Thoughts</span> <span class="menudesc"></span></a></li>
<li class="item-115"><a href="/index.php/carrie/makeup" ><span class="menutitle">Make-up</span> <span class="menudesc"></span></a></li>
<li class="item-116"><a href="/index.php/carrie/books" ><span class="menutitle">books</span> <span class="menudesc"></span></a></li></ul></li>
<li class="item-117"><a href="/index.php/contact" ><span class="menutitle">Contact</span> <span class="menudesc"></span></a></li></ul>
</div>

CSS：

/* Navigation */
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important}
#navbar { height: 55px; }
#navbar.row { margin-bottom: 0 }
#navigation { padding:0 10px;}
#navigation ul.menu { float:right}
#navigation .menu { margin: 0; padding: 0; list-style: none;}
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; }
#navigation .menu > li { display: block; float: left; }
#navigation .menu > li ul {}
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; }
#navigation .menu ul ul { left: 100%; top: 0; }
#navigation .menu ul ul li { width: 100% }
#navigation .menu li { position: relative }
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; }
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;}
/* current item */
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;}
#navigation .menu > .active > a, #navigation li.active > a {color: #fff }
#navigation .menu > li { margin-right: 5px; padding:0; }
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; }
/*drop-down styles*/
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px;
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)}
#navigation .menu li:hover ul { margin-top: 0; }
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; }
#navigation .menu ul li { border-bottom: 1px solid #ccc }
#navigation .menu ul li:first-child { }
#navigation .menu ul li:last-child { border: 0 }
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;}
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; }
#navigation .selector { display: none }
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;}
#navigation ul.sub-menu a { font-size:12px;}
#navigation ul.sub-menu .active > a { color:#67ABC9}
#navigation i { text-align:right}
#menu-icon {display: none;}
#slide-wrap a:hover{ color:#fff}
4

2 回答 2

1

你的样式表很乱，同一个选择器有很多不同的规则，加入它们；并删除未使用的。

我已经清洁了第一部分，自己完成清洁。

关于你的问题，基本上你需要

#navigation > .menu > .active > a,
#navigation > .menu > li:hover > a{
    color: #fff;
    background:#67ABC9;
}

注意使用li:hover > a代替li> a:hover。

演示

于 2013-11-02T17:25:34.227 回答
0

我认为这是您正在寻找的解决方案。 http://jsfiddle.net/pzaF8/

#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF}

我只在你的 css 中添加了这一行，我没有编辑你的，因为它看起来很乱。

于 2013-11-02T17:15:38.297 回答