Изменение CSS меню при наведении курсора цвета

У меня есть этот CSS для моего горизонтального меню:Изменение CSS меню при наведении курсора цвета

.active { /* active/current link */ 
    background: #666666; 
    text-decoration:none; 
} 
.toggleMenu { /* small screen open menu option/link */ 
    display: none; 
    background: #666666; 
    padding: 10px 15px; 
    color: #ffffff; 
    width:100%; 
    text-align:center; 
} 
a { 
    text-decoration: none; 
} 
.container { 
    width: 100%; 
    margin: 10px auto; 
} 

.nav { /* main nav bar */ 
    list-style: none; 
    *zoom: 1; 
    background:#f36f25; 
    text-align: center; 
} 
.nav:before,.nav:after { 
    content: " "; 
    display: table; 
} 
nav, ul, li, a { 
    margin: 0; 
    padding: 0; 
} 
.nav > li:hover { /* main link hover */ 
    background: #666666; 
    text-decoration:none; 
} 
.nav:after { 
    clear: both; 
} 
.nav ul { 
    list-style: none; 
    width: 12em; 
} 
.nav a { 
    padding: 10px 15px; 
    color:#fff; 
} 
.nav li { 
    position: relative; 
    text-align: left; 
} 
.nav > li { 
    display: inline-block; 
} 
.nav > li > .parent { 
    background-image: url("/images/downArrow.png"); 
    background-repeat: no-repeat; 
    background-position: right; 
} 
.nav > li > a { 
    display: block; 
} 
.nav li ul { 
    position: absolute; 
    left: -9999px; 
} 
.nav > li.hover > ul { 
    left: 0; 
} 
.nav li li.hover ul { 
    left: 100%; 
    top: 0; 
} 
.nav li li a { /* sub menu list */ 
    display: block; 
    background: #F36F25; 
    position: relative; 
    z-index:100; 
    border-top: 1px solid #ffffff; 
} 
.nav li li.hover a { /* sub menu list hover */ 
    background:#666666; 
} 
.nav li li li.hover a { /* sub sub menu list hover */ 
    background:#F36F25; 
    color:#ffffff; 
    z-index:200; 
    border-top: 1px solid #ffffff; 
} 
.nav li li li a { /* sub sub menu list */ 
    background:#F36F25; 
} 

@media screen and (max-width: 760px) { 
    .active { 
     display: block; 
    } 
    .nav { 
     border-top: none; 
    } 
    .nav > li { 
     display: block; 
     border-top: 1px solid #ffffff; 
    } 
    .nav > li > .parent { 
     background-position: 95% 50%; 
    } 
    .nav li li .parent { 
     background-image: url("/images/downArrow.png"); 
     background-repeat: no-repeat; 
     background-position: 95% 50%; 
    } 
    .nav ul { 
     display: block; 
     width: 100%; 
    } 
    .nav > li.hover > ul , .nav li li.hover ul { 
     position: static; 
    } 
}

, но я не могу работать, как изменить фон суб субменю и парить цвета фона

здесь является скрипку: http://jsfiddle.net/UY7z4/1/

UPDATE:

Это в подменю:

.nav li li a { /* sub menu list */ 
    display: block; 
    background: #F36F25; 
    position: relative; 
    z-index:100; 
    border-top: 1px solid #ffffff; 
} 
.nav li li.hover a { /* sub menu list hover */ 
    background:#666666; 
} 
.nav li li li a { /* sub sub menu list */ 
    background:#F36F25; 
} 
.nav li li li.hover a { /* sub sub menu list hover */ 
    background:#666666; 
    color:#ffffff; 
    z-index:200; 
    border-top: 1px solid #ffffff; 
}

так подменю должны иметь #F36F25 фон и #666666 парения фон

и подменю суб должны иметь #F36F25 фон и #666666 парения фон

источник

2013-12-23 charlie

Эта скрипка не показывает подменю на парении, все я вид изменения цвета фона службы – Huangism

Почему вы не используете в зависимости от уровня элемента. Это была бы лучшая практика, я думаю – Heaven42

рабочая скрипка http://jsfiddle.net/UY7z4/7/ – Huangism

Вы можете попробовать с этим селектором для подменю:

.nav >li ul > li a { 
    background:red; 
} 
.nav >li ul >li:hover > a { 
    background:blue; 
}

И для подменю:

.nav >li ul > li ul li a { 
    background:pink; 
} 
.nav >li ul > li ul li:hover a { 
    background:brown; 
}

Демонстрационная http://jsfiddle.net/UY7z4/11/

источник

2013-12-23 19:27:26 DaniP

подменю не показывает фон наведения, проверьте мое редактирование – charlie

@charlie теперь я включаю подменю – DaniP

Обновленный ответ здесь

http://jsfiddle.net/UY7z4/19/

.nav > li > ul > li.hover > a { /* sub menu list hover */ 
    background:#666666; 
} 
.nav > li > ul > li.hover > ul > li { /* sub sub menu list hover */ 
    background:#F36F25; 
} 
.nav > li > ul > li.hover > ul > li:hover a { 
    background:#666; 
    color:#ffffff; 
    z-index:200; 
    border-top: 1px solid #ffffff; 
}

источник

2013-12-23 19:32:01 Huangism

i хотите, чтобы в подменю было # F36F25 цвет фона и # 666666 на hover – charlie

ok, так что измените цвет по своему вкусу. То, что я делаю, вы используете .hover, когда вы должны использовать: hover – Huangism

, но это необходимо для подменю будет # F36F25 и его показ как # 666666 - он должен быть только # 666666 при зависании – charlie

вам нужно добавить:

/*for hover*/ 
.nav li ul li:hover { 
    background: #666666; 
    text-decoration:none; 
} 
/*for background*/ 
.nav li ul li{ 
    background: #F36F25 ; 
    text-decoration:none; 
}

источник

2013-12-23 19:32:52

Изменение CSS меню при наведении курсора цвета

ответ

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