Не работает простое подменю на HTML&CSS

@Aleksey24 · Регистрация: 16.10.2013

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

Тренировался тут делать подменю на HTML&CSS и появилась одна загвоздка, вот вообщем код

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
ul{
    list-style-type:none;
    padding:0;
    margin:0;
    
}
ul li a{
    display:block;
    width:100px;
    height:30px;
    background:#CCC;
    text-decoration:none;
    margin-left:10px;
    
}
ul li a:hover{
    background: #060;
    
}
ul li{
    float:left;
    margin-right:-10px;
    
}
.df li{
    float:none;
    
    
}
.df{
    display:none;
    
}
ul li a:hover .df{
    display:block;
    
    
    
}

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li><a href="/">Тренировка</a></li>
<li><a href="/">Тренировка</a></li>
<li><a href="/">Тренировка</a>
<ul class="df">
<li><a href="/">Тренировка</a></li>
<li><a href="/">Тренировка</a></li>
 
</ul>
 
</li>
<li><a href="/">Тренировка</a></li>
<li><a href="/">Тренировка</a></li>
 
</ul>

Не понятно, почему не срабатывает (не появляется подменю) при наведении на ссылку.

CSS
1
2
3
4
5
6
ul li a:hover .df{
    display:block;
    
    
    
}

Главное ставишь когда ul li:hover (вместо а) .df тогда при наведении на список работает, а вот почему при наведении на ссылку не работает?

@sMockingbird · 27.06.2014, 15:06

ul li a:hover .df{
мб потому что у Вас в a нету .df?
т.е. у Вас df идёт после a, а не внутри

CSS
1
2
<li><a href="/">Тренировка</a>
<ul class="df">

@Aleksey24 · 27.06.2014, 15:11 **[ТС]**

ТАк он и должен быть после а. Т.е. наводим на ссылку а (событие) и дальше по цепочке отдается приказ .df - показать подменю. Ведь вот так ставишь ul li:hover .df и все работает, тоже ведь дф после ли идет, а там после а, какая разница. Что там ссылка что тут список. Тут в чем то другом загвоздка...

@sMockingbird · 27.06.2014, 15:12

Сообщение от Aleksey24

Ведь вот так ставишь ul li:hover .df и все работает,

потому что .df находится внутри li, но не внутри a/

может проблема и не только в этом, но тут явно ошибка

@Aleksey24 · 27.06.2014, 15:17 **[ТС]**

Видать при наведении на ссылку - она не может дальше по цепочке сработать. Вот тут http://htmlbook.ru/css/hover тоже подменю отображается вот так

CSS
1
2
3
li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }

т.е. при наведении на ли, а на ли а:ховер ул.

Добавлено через 1 минуту

Сообщение от sMockingbird

потому что .df находится внутри li, но не внутри a/

может проблема и не только в этом, но тут явно ошибка

потому что .df находится внутри li, но не внутри a/

Точно ты прав! Спасибо, вот он его унаследовать и не может!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Aleksey24 Продвижение сайтов. -7 / 3 / 0 Регистрация: 16.10.2013 Сообщений: 154
	27.06.2014, 15:11 [ТС]
	ТАк он и должен быть после а. Т.е. наводим на ссылку а (событие) и дальше по цепочке отдается приказ .df - показать подменю. Ведь вот так ставишь ul li:hover .df и все работает, тоже ведь дф после ли идет, а там после а, какая разница. Что там ссылка что тут список. Тут в чем то другом загвоздка... 0

Не работает простое подменю на HTML&CSS

Решение