Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60
1

менюшка с эффектом :hover

05.06.2014, 14:46. Показов 492. Ответов 2
Метки нет (Все метки)

приветствую знатоков! помогите разобраться с задачей, чтобы цвет ссылки первого уровня оставался красным при развернутом меню. вот код...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- !navigation block START -->
            <nav class="n-top">
                <ul class="nav">
                    <li style="padding-right: 5px;">
                        <a class="drop" href="wedding-dress.html">Свадебные платья</a>
                        <ul class="dropMenu1 blockPadd">
                            <li class="fitIn"><a href="collection_2013.html">Коллекция 2013</a></li>
                            <li class="fitIn"><a href="collection_2014.html">Коллекция 2014</a></li>
                            <li><a href="motherdress.html">Свадебные платья для мам</a></li>
                        </ul>
                    </li>
                    <li style="padding-right: 5px;">
                        <a class="drop" href="accessories.html">Аксессуары</a>
                        <ul class="dropMenu2 blockPadd">
                            <li><a class="fitIn" href="fata.html">Фата</a></li>
                            <li><a class="fitIn" href="gloves.html">Перчатки</a></li>
                            <li><a class="fitIn" href="bijut.html">Бижутерия</a></li>
                            <li><a class="fitIn" href="umbrellas.html">Зонты</a></li>
                            <li><a href="rng.html">Подушечки для колец</a></li>
                            <li><a class="fitIn" href="bandage.html">Подвязки</a></li>
                            <li><a class="fitIn" href="podjub.html">Подъюбники</a></li>
                            <li><a class="fitIn" href="bags.html">Сумочки</a></li>
                        </ul>
                    </li>
                    <li style="padding-right: 5px;">
                        <a class="drop" href="kids-dress.html">Детские платья</a>
                        <ul class="dropMenu3 blockPadd">
                            <li><a href="kids-dress-ceremony.html">Для утренников</a></li>
                            <li><a href="kids-exclisive.html">Эксклюзивные</a></li>
                        </ul>
                    </li>
                    <li style="padding-right: 5px;">
                        <a class="drop" href="kids-accessories.html">Акссесуары для детей</a>
                        <ul class="dropMenu4 blockPadd">
                            <li><a href="kids-gloves.html">Перчатки</a></li>
                            <li><a href="kids-bags.html">Сумочки</a></li>
                            <li><a href="kids-podjub.html">Подъюбники</a></li>
                        </ul>
                    </li>
                    <li style="padding-right: 5px;">
                        <a class="drop" href="service.html">Услуги</a>
                        <ul class="dropMenu5 blockPadd">
                            <li><a href="dry-cleaning.html">Химчистка</a></li>
                            <li><a href="selling.html">Продажа</a></li>
                            <li><a href="restoration.html">Реставрация</a></li>
                            <li><a href="order.html">Пошив на заказ</a></li>
                            <li><a href="rent.html">Прокат</a></li>
                        </ul>
                    </li>
                    <li style="padding-right: 5px;">
                        <a href="bride.html">Наши невесты</a>
                    </li>
                    <li style="padding-right: 5px;">
                        <a href="about-us.html">О нас</a>
                    </li>
                    <li style="padding-right: 5px;">
                        <a href="contacts.html">Контакты</a>
                    </li>
                </ul>
            </nav>
            <!-- #navigation block END -->
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/* !navigation block START */
            nav.n-top{
                height: auto;
                margin: 0;
                max-width: 1022px;
                width: 100%;
                }
            .nav, .nav ul{
                font: 16px/22px Cuprum, sans-serif;
                list-style: none;
                margin: 0;
                padding: 0;
                position: absolute;
                right: -5px;
                top: 55px;
                }
                .nav{
                    height: 23px;
                    }
                .nav li{
                    display: block;
                    float: left;
                    position: relative;
                    }
    /* цвет ссылки первого уровня остается красным при развернутом меню */
        .nav li:hover .drop{
                       ???????????
                       }
        /* здесь нужен код. может нужно что-то изменить */
                    .nav li:hover ul{
                        display: block;
                        }
                    .nav ul{
                        background-color: #F4DDB4;
                        display: none;
                        left: 0;
                        margin-top:-1px;
                        padding: 3px 0;
                        position: absolute;
                        top: 20px;
                        width: 200px;
                        }
                    .nav a{
                        color: #333333;
                        display: block;
                        height: 22px;
                        padding: 0 3px;
                        text-decoration: none;
                        }
                    .nav a:hover{
                            color: #AD3444;
                            }
                            .blockPadd{
                                margin-top: 0;
                                padding: 3px;
                                width: auto;
                                z-index:3;
                                }
                                .dropMenu1 li,.dropMenu2 li,.dropMenu3 li,.dropMenu4 li,.dropMenu5 li{
                                    display: block;
                                    height: 23px;
                                    line-height: 23px;
                                    width: 100%;
                                    z-index: 2;
                                    }
                                .dropMnu1 a,.dropMnu2 a,.dropMenu3 a,.dropMenu4 a,.dropMenu5 a{
                                    color: #666666;
                                    float: none;
                                    height: 23px;
                                    line-height: 23px;
                                    margin-top: 0;
                                    padding-top: 3px;
                                    text-align: left;
                                    vertical-align:center;
                                    width: 100%;
                                    z-index: 2;
                                    }
                                .dropMenu1 a:hover,.dropMenu2 a:hover,.dropMenu3 a:hover,.dropMenu4 a:hover,.dropMenu5 a:hover{
                                    background-color: #a92d3e;
                                    color: #FFFFFF;
                                    float: none;
                                    height: 23px;
                                    text-align: left;
                                    width: 193px;
                                    z-index: 2;
                                    }
/* #navigation block END */
благодарю всех за помощь!
--------------------------------
С уважением, htmlcss
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.06.2014, 14:46
Ответы с готовыми решениями:

Смещение картинки с hover эффектом
Пмогите разобраться. При наведении на фото указателем мыши, картика смещается по осям x, y. При...

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для выпадающих меню. Подогнал...

менюшка на css
Вот делаю меню для сайта найдите ошибку здесь чтот не так &lt;div class=menu2&gt; &lt;div&gt; &lt;a...

Плавающая менюшка
Есть страница, ширина допустим 100%. На ней менюшка (плавающей ширины, сейчас 200px, завтра...

2
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 349
05.06.2014, 15:22 2
добавте стиль
CSS
1
2
3
.nav > li:hover > a {
  color: #AD3444;
}
1
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60
05.06.2014, 15:51  [ТС] 3
благодарю за помощь. работает на всех кроме index. пока не разобрался с проблемой... еще раз спасибо!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.06.2014, 15:51

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Менюшка сайта
как сделать меню сайта(которое находится справо(навигацыя)) как на _http://www.quaket.net ???

Не перемещается левая менюшка.
Здравствуйте. У меня возникла такая проблема. Что не передвигается левая менюшка(блок) вверх...

Фон с параллакс эффектом
Привет всем, помогите разобраться. При уменьшении ширины браузера фон в разделах, уменьшается и...

Прблема с параллакс эффектом
Здравствуйте, уважаемые коллеги! Делаю блок с параллакс эффектом. Но в макете имеются зигзаги до...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.