tree85

Всем спасибо за помощь, разобрался сам! Если кому интересно, проблема была в позиционировании и z-index <div class="centerWrapper"> <!-- main menu --> <ul id="mainMenu" class="hor noUnd"> <li class="mainMenuLi-1"> <a href="#">Лого </a> <div class="secondMenuWrapper"> <ul class="secondMenu hor"> <li><a href="#">Дизайн логотипов</a></li> <li><a href="#">Дизайн </a></li> <li><a href="#">Дизайн</a></li> </ul> </div> </li> <li class="mainMenuLi-2"> <a href="#">Дизайн</a> <div class="secondMenuWrapper"> <ul class="secondMenu hor"> <li><a href="#">Дизайн логотипов</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Дизайн</a></li> </ul> </div> </li> . . . <li class="mainMenuLi-6"> <a href="#">Интерьеры</a> <div class="secondMenuWrapper"> <ul class="secondMenu hor"> <li><a href="#">Дизайн</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Дизайн</a></li> </ul> </div> </li> </ul </div> #mainMenu li[class|="mainMenuLi"] { margin-left:-1px; } #mainMenu li.mainMenuLi-1 {margin-left: 0px;} #mainMenu { margin: 0 31px 0 148px; cursor: default; background-color: #f2f2f2; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#767574)); background-image: -moz-linear-gradient(#f2f2f2, #767574); background-image: -o-linear-gradient(#f2f2f2, #767574); background-image: linear-gradient(#f2f2f2, #767574); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#767574'); position: relative; /*первая позиция*/ } #mainMenu li[class|="mainMenuLi"] { margin-left: -1px; } #mainMenu li.mainMenuLi-1 {margin-left: 0px;} #mainMenu li[class|="mainMenuLi"] > a { display: block; width: 164px; height: 36px; background: url(css/images/mainMenu.png) no-repeat 0 0; text-align: center; text-transform: uppercase; font-family: PragmaticaCondCTT; font-size: 90%; line-height: 2.8em; color: #58595b; } #mainMenu li.mainMenuLi-1 > a {background-position: 0 0;} #mainMenu li.mainMenuLi-2 > a {background-position: -164px 0;} #mainMenu li.mainMenuLi-3 > a {background-position: -328px 0;} #mainMenu li.mainMenuLi-4 > a {background-position: -492px 0;} #mainMenu li.mainMenuLi-5 > a {background-position: -656px 0;} #mainMenu li.mainMenuLi-6 > a {background-position: -820px 0;} #mainMenu li[class|="mainMenuLi"] > a:hover, #mainMenu li[class|="mainMenuLi"]:hover > a { color: #ffffff; } #mainMenu li.mainMenuLi-1 > a:hover, #mainMenu li.mainMenuLi-1:hover > a {background-position: 0 -36px;} #mainMenu li.mainMenuLi-2 > a:hover, #mainMenu li.mainMenuLi-2:hover > a {background-position: -164px -36px;} #mainMenu li.mainMenuLi-3 > a:hover, #mainMenu li.mainMenuLi-3:hover > a {background-position: -328px -36px;} #mainMenu li.mainMenuLi-4 > a:hover, #mainMenu li.mainMenuLi-4:hover > a {background-position: -492px -36px;} #mainMenu li.mainMenuLi-5 > a:hover, #mainMenu li.mainMenuLi-5:hover > a {background-position: -656px -36px;} #mainMenu li.mainMenuLi-6 > a:hover, #mainMenu li.mainMenuLi-6:hover > a {background-position: -820px -36px;} #mainMenu li[class|="mainMenuLi"] div.secondMenuWrapper { display: none; position: absolute; top: 36px; left: 0px; width: 955px; padding: 0 22px; background-color: #4c4847; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4847), to(#332e2c)); background-image: -moz-linear-gradient(#4c4847, #332e2c); background-image: -o-linear-gradient(#4c4847, #332e2c); background-image: linear-gradient(#4c4847, #332e2c); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4847', EndColorStr='#332e2c'); z-index: 10; } #mainMenu li.mainMenuLi-1 div.secondMenuWrapper {border-top: 4px solid #da251d;} #mainMenu li.mainMenuLi-2 div.secondMenuWrapper {border-top: 4px solid #e98e28;} #mainMenu li.mainMenuLi-3 div.secondMenuWrapper {border-top: 4px solid #f8df11;} #mainMenu li.mainMenuLi-4 div.secondMenuWrapper {border-top: 4px solid #97cc2b;} #mainMenu li.mainMenuLi-5 div.secondMenuWrapper {border-top: 4px solid #0084ca;} #mainMenu li.mainMenuLi-6 div.secondMenuWrapper {border-top: 4px solid #842378;} #mainMenu li[class|="mainMenuLi"] > a:hover + div.secondMenuWrapper, #mainMenu li[class|="mainMenuLi"] > div.secondMenuWrapper:hover { display: block!important; } #mainMenu li[class|="mainMenuLi"] ul.secondMenu { position: relative; } #mainMenu li.mainMenuLi-1 ul.secondMenu {padding-left: 0; } #mainMenu li.mainMenuLi-2 ul.secondMenu #mainMenu li.mainMenuLi-3 ul.secondMenu {padding-left: 200px;} #mainMenu li.mainMenuLi-4 ul.secondMenu {padding-left: 300px;} #mainMenu li.mainMenuLi-5 ul.secondMenu {padding-left: 150px;} #mainMenu li.mainMenuLi-6 ul.secondMenu {padding-left: 500px;} #mainMenu li[class|="mainMenuLi"] ul.secondMenu li a { text-align: center; text-transform: uppercase; font-family: PragmaticaCondCTT; height: 28px; padding: 0 12px; color: #ffffff; display: block; line-height: 1.9em; position: relative; }

Добрый день! Такая проблема: есть двухуровневое меню, при наведении выпадает второй уровень меню, в Ie не выполняется данное действие , во всех остальных браузерах все отлично работает!? Помогите пожалуйста!!! Заранее всем благодарен!! Посмотреть можно здесь

Дело в в том что я так пробовал, но у меня не выходит поменять цвет, т.е. сколько я не пробовал он берет цвет из #navigation li a{} #navigation li a { color: #9e9e9e; font-family: PragmaticaCondCTT; font-size: 110%; text-transform: uppercase; text-decoration: none; padding: 5px 15px; display: block; [b] color: #e4e1e1;[/b] } #navigation li a:hover { background-color: #ef9f0b; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef9f0b), to(#e67d19)); background-image: -moz-linear-gradient(#ef9f0b, #e67d19); background-image: -o-linear-gradient(#ef9f0b, #e67d19); background-image: linear-gradient(#ef9f0b, #e67d19); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ef9f0b', EndColorStr='#e67d19'); } #navigation li.active { background-color: #ef9f0b; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef9f0b), to(#e67d19)); background-image: -moz-linear-gradient(#ef9f0b, #e67d19); background-image: -o-linear-gradient(#ef9f0b, #e67d19); background-image: linear-gradient(#ef9f0b, #e67d19); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ef9f0b', EndColorStr='#e67d19'); [b]color: #ffffff;[/b]

Добрый день! Подскажите в #ul li.active { background: red;} можно ли как-нибудь цвет шрифта задать?

Попробовал оформить, но у меня получается,что выводится только хедер и футер..Не пойму в чем причина, может подскажите , буду премного благодарен..!! Я делаю так: беру весь код между <body><body> и вставляю в окно с надписью html, ну и весь код css в окно css затем жму Run и мне выводится, только хедер и футер, без контента..? Может что еще надо? я ничего больше там не делал и ничего не изменял..

Версия IE 7-8-9 во всех версиях одно и тоже! Ваш вариант никакой реакции не произвел.

Всем День Добрый! Возможно мой вопрос банальный... Столкнулся с такой проблемой мне нужно сделать фон меню по высоте блока с контентом.Т.е. при изменении содержимого(высоты) контентного блока, должна меняться высота фона меню.Применял height:100% или auto,но высота меняется только по содержимому самого меню.Блок меню находится внутри, блока с контентом? Подскажите что делать? Заранее спасибо за ответ!

не понял, что вы имеете ввиду?

Всем день добрый!, у меня такая проблема, разъехались все элементы, находящиеся в тэгах li(т.е. все показывает в столбик, а не в строку), применял display: inline-block - не помогает, помогает только float:left, но и то не слишком корректно все отображается, при этом, у меня двухуровневое меню на css, так там все пункты в развернутом виде отображаются, без background и свойст шрифта...? что делать? подскажите пложалуйста..? Ну, говорить, что во всех других браузерах всё отображается отлично, я думаю не стоит.!! Посмотреть как выглядит можно http://itmag.es/5iNxx и как оно выглядит в рабочем варианте http://itmag.es/5rheU CSS .hor li, li.hor {display: inline-block;} #mainMenu { margin: 0 31px 0 148px; cursor: default; background-color: #f2f2f2; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#767574)); background-image: -moz-linear-gradient(#f2f2f2, #767574); background-image: -o-linear-gradient(#f2f2f2, #767574); background-image: linear-gradient(#f2f2f2, #767574); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#767574'); position: relative; z-index: 5; } #mainMenu li[class|="mainMenuLi"] { margin-left: -1px; } #mainMenu li.mainMenuLi-1 {margin-left: 0px;} #mainMenu li[class|="mainMenuLi"] > a { display: block; width: 164px; height: 36px; background: url(css/images/mainMenu.png) 0 0 no-repeat; text-align: center; text-transform: uppercase; font-family: PragmaticaCondCTT; font-size: 90%; line-height: 2.8em; color: #58595b; position: relative; } #mainMenu li.mainMenuLi-1 > a {background-position: 0 0;display: block;} #mainMenu li.mainMenuLi-2 > a {background-position: -164px 0;display: block;} #mainMenu li.mainMenuLi-3 > a {background-position: -328px 0;display: block;} #mainMenu li.mainMenuLi-4 > a {background-position: -492px 0;display: block;} #mainMenu li.mainMenuLi-5 > a {background-position: -656px 0;display: block;} #mainMenu li.mainMenuLi-6 > a {background-position: -820px 0;display: block;} #mainMenu li[class|="mainMenuLi"] > a:hover, #mainMenu li[class|="mainMenuLi"]:hover > a { color: #ffffff; } #mainMenu li.mainMenuLi-1 > a:hover, #mainMenu li.mainMenuLi-1:hover > a {background-position: 0 -36px;} #mainMenu li.mainMenuLi-2 > a:hover, #mainMenu li.mainMenuLi-2:hover > a {background-position: -164px -36px;} #mainMenu li.mainMenuLi-3 > a:hover, #mainMenu li.mainMenuLi-3:hover > a {background-position: -328px -36px;} #mainMenu li.mainMenuLi-4 > a:hover, #mainMenu li.mainMenuLi-4:hover > a {background-position: -492px -36px;} #mainMenu li.mainMenuLi-5 > a:hover, #mainMenu li.mainMenuLi-5:hover > a {background-position: -656px -36px;} #mainMenu li.mainMenuLi-6 > a:hover, #mainMenu li.mainMenuLi-6:hover > a {background-position: -820px -36px;} #mainMenu li[class|="mainMenuLi"] div.secondMenuWrapper { position: absolute; top: 36px; left: 0; width: 955px; padding: 0 22px; background-color: #4c4847; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4847), to(#332e2c)); background-image: -moz-linear-gradient(#4c4847, #332e2c); background-image: -o-linear-gradient(#4c4847, #332e2c); background-image: linear-gradient(#4c4847, #332e2c); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4c4847', EndColorStr='#332e2c'); } #mainMenu li.mainMenuLi-1 div.secondMenuWrapper {border-top: 4px solid #da251d;} #mainMenu li.mainMenuLi-2 div.secondMenuWrapper {border-top: 4px solid #e98e28;} #mainMenu li.mainMenuLi-3 div.secondMenuWrapper {border-top: 4px solid #f8df11;} #mainMenu li.mainMenuLi-4 div.secondMenuWrapper {border-top: 4px solid #97cc2b;} #mainMenu li.mainMenuLi-5 div.secondMenuWrapper {border-top: 4px solid #0084ca;} #mainMenu li.mainMenuLi-6 div.secondMenuWrapper {border-top: 4px solid #842378;} #mainMenu li[class|="mainMenuLi"] > a:hover + div.secondMenuWrapper, #mainMenu li[class|="mainMenuLi"] > div.secondMenuWrapper:hover { display: block !important; } #mainMenu li[class|="mainMenuLi"] ul.secondMenu { position: relative; } #mainMenu li.mainMenuLi-1 ul.secondMenu {padding-left: 0;} #mainMenu li.mainMenuLi-2 ul.secondMenu {padding-left: 100px;} #mainMenu li.mainMenuLi-3 ul.secondMenu {padding-left: 200px;} #mainMenu li.mainMenuLi-4 ul.secondMenu {padding-left: 300px;} #mainMenu li.mainMenuLi-5 ul.secondMenu {padding-left: 400px;} #mainMenu li.mainMenuLi-6 ul.secondMenu {padding-left: 500px;} #mainMenu li[class|="mainMenuLi"] ul.secondMenu li a { text-align: center; text-transform: uppercase; font-family: PragmaticaCondCTT; height: 28px; padding: 0 12px; color: #ffffff; line-height: 1.9em; } #mainMenu li.mainMenuLi-1 ul.secondMenu li a:hover { background-color: #da251d; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#da251d), to(#c9261d)); background-image: -moz-linear-gradient(#da251d, #c9261d); background-image: -o-linear-gradient(#da251d, #c9261d); background-image: linear-gradient(#da251d, #c9261d); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#da251d', EndColorStr='#c9261d'); } #mainMenu li.mainMenuLi-2 ul.secondMenu li a:hover { background-color: #e98e28; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e98e28), to(#e77d21)); background-image: -moz-linear-gradient(#e98e28, #e77d21); background-image: -o-linear-gradient(#e98e28, #e77d21); background-image: linear-gradient(#e98e28, #e77d21); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e98e28', EndColorStr='#e77d21'); } . . . HTML <ul id="mainMenu" class="hor noUnd"> <li class="mainMenuLi-1"> <a href="#">Лого / Фирменный стиль</a> <div class="secondMenuWrapper"> <ul class="secondMenu hor"> <li><a href="#">Дизайн логотипов</a></li> <li><a href="#">Фирменный стиль</a></li> <li><a href="#">Персонажи</a></li> </ul> </div> </li> <li class="mainMenuLi-2"> <a href="#">Реклама / Визуализация</a> <div class="secondMenuWrapper"> <ul class="secondMenu hor"> <li><a href="#">Дизайн логотипов</a></li> <li><a href="#">Фирменный стиль</a></li> <li><a href="#">Персонажи</a></li> </ul> </div> </li> . . .