Справка по меню CSS - проблемы с родителями/родителями

У меня есть меню в шаблоне joomla, когда вы наводите ссылку на ссылку. Я хотел бы знать, как заставить родителя оставаться таким, когда он зависает над ребенком (подменю).Справка по меню CSS - проблемы с родителями/родителями

Мой текущий код: 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}

источник

2013-11-02 kgraves

Это слишком много кода, чтобы пробраться через. Пожалуйста, сделайте JSFIddle –

Как я понимаю, вам нужно выделить ссылку, когда вы наводите подменю. Правильно ли я понял? – timofeiMih

Ваша таблица стилей грязная, у вас есть много разных правил с тем же селектором, присоединяйтесь к ним; и удалить неиспользуемые.

Я очистил первую часть, закончу чистку самостоятельно.

О ваш вопрос, в основном вам нужно

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

Обратите внимание на использование li:hover > a вместо li> a:hover.

Demo

источник

2013-11-02 17:25:34 Oriol

Css может быть автоматически очищен с помощью [service] (http://www.cleancss.com/), если вам сложно сделать это самостоятельно – timofeiMih

Я думаю, что это решение, которое вы ищете. http://jsfiddle.net/pzaF8/

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

Я только добавить эту строку о вашем CSS, я не был `Отредактируйте вашу причину это выглядит неаккуратно.

источник

2013-11-02 17:15:38 timofeiMih

Справка по меню CSS - проблемы с родителями/родителями

ответ

Смежные вопросы