Некорректное отображение пунктов меню

@kuryachiy · Регистрация: 16.02.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. Нужна помощь. Есть выпадающее вертикальное меню. При наведении курсора на пункты выпавшего меню позиция наведения как-то сдвинута. Т.е. курсор наведен на один пункт меню, а выделяется уже следующий. как исправить такое?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="ac-container">
 
  <div>
    <input id="ac-2" name="accordion-1" type="checkbox" />
    <label for="ac-2">Обучение за рубежом</label>
    <article class="ac-small">
 
    <a href="pages.php?id=132">Языковые курсы</a><br />
      <a href="pages.php?id=62">Подгот. программы</a><br />
      <a href="pages.php?id=63">Высшее образование</a><br />
      <a href="pages.php?id=236">Магистратура</a><br />
      <a href="pages.php?id=93">Экзам. программы</a><br />
      <a href="pages.php?id=133">Необх. документы</a>
    </article>
  </div>
 
</section>

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
88
89
90
91
92
93
94
95
96
97
98
99
.ac-container{
    width: 182px;
    margin: 5px 15px;
    text-align: left;
}
.ac-container label{
    font-family:Arial, sans-serif;
    padding: 1px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 32px;
    cursor: pointer;
    color: #333;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 24px;
    font-size: 13px;
    background: url(images/button1.png) no-repeat; /* ôîí áëîêà */ 
    width: 182px; /* øèðèíà áëîêà */
    height: 32px;
  font-weight:bold;
}
.ac-container label a {text-decoration:none;}
.ac-container label:hover{
    background: url(images/button2.png) no-repeat;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: url(images/button2active.png) no-repeat;
    color: #911515;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    
}
.ac-container label:active{
    background: url(images/button2active.png) no-repeat;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;  
}
.ac-container input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}
.ac-container input{
    display: none;
}
.ac-container article{
    
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article a{
    
    color: #777;
    line-height: 20px;
    font-size: 12px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container article a:hover{
    
    color: #911515;
    line-height: 20px;
    font-size: 12px;
    padding: 20px;
    
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    
}
.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
    height: 230px;
}

Добавлено через 1 час 14 минут
посмотреть меню

@sKotenok · 16.02.2013, 15:56

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ac-container article a:hover{
    color: #911515;
    line-height: 20px;
    font-size: 12px;
    padding: 0px; /*Было padding: 20px */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container article a:hover{
    color: #911515;
    line-height: 20px;
    font-size: 12px;
    padding: 0px;/* padding: 20px;*/
    padding-left: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Похоже просто ссылки из-за padding-а "налезают" друг на друга и браузер не может разобраться, какая сейчас hover

Добавлено через 13 минут
Спасибо за CSS-трюк с input:checked + label:hover - в жизни бы не догадался так сделать ^_^, утащил себе в склад интересных приемов, как-раз в одном месте будет нужно.

@kuryachiy · 16.02.2013, 16:17 **[ТС]**

нет за что. нашел на просторах интернета. Вам спасибо за помощь.
Появился еще вопрос по этому меню. Здесь задается фиксированная высота выпадающего блока. Если поставить значение auto, то блок открывается не плавно. Как сделать, чтоб блок открывался плавно и с автоматической высотой?

CSS
1
2
3
4
.ac-container input:checked ~ article.ac-small{
    height: 140px;
 
}

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .