Как сделать так чтобы подсписок списка имел свой стиль?

@Harts · Регистрация: 17.03.2013

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

Здравствуйте,
Как сделать так чтобы подсписок списка имел свой стиль?
Пример:

HTML5
1
2
3
4
5
6
7
8
<ul class="Menu">
    <li><a href="#">Main</a></li>
    <li><a href="#">Menu</a>
        <ul class="sub-menu"> 
            <li><a href="#">1</a></li>
        </ul></li>
    <li><a href="#">About</a></li>
</ul>

CSS
1
2
3
4
5
6
.Menu{
font: 18pt;
}
.sub-menu{
font: 20pt;
}

Как не изменял, все равно выводить классом Menu.

@MVS76 · 05.03.2014, 14:38

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

.sub-menu{
font: 20pt;
}

А чего собственно "font" ?
Вы напишите до конца в правильном формате "font-size: 20pt;"

@Harts · 05.03.2014, 14:46 **[ТС]**

Зная, но проблема в другом. У меня не как не выходить сделать так, чтобы подсписок имел свои стиль.
Он автоматический берет стиль .Menu. И еще, имеется класс:

CSS
1
2
.Menu li {}
.sub-menu li {}

Может из-за этого не хочет менять стиль?

@Ukkas · 05.03.2014, 15:04

Harts, ну а в

CSS
1
2
.Menu li {}
.sub-menu li {}

ничего не прописано, что противоречит свойствам

CSS
1
2
.Menu {}
.sub-menu {}

@Harts · 05.03.2014, 15:23 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="Menu">
    <li style="border-left:none"><a href="#">Main</a></li>
    <li><a href="#">Menu</a>
        <ul class="sub-menu">
            <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Forum</a></li>
    <li style="border-right: none"><a href="#">About</a></li>
</ul>

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
#Menu{
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 160px;
    left: 15px; 
}
#Menu li {
    cursor: pointer;
    float: left;
    padding: 0px 7px;
    border-right: 1px solid #397159;
    border-left: 1px solid #023301;
}
#Menu li a{
    font: 18pt Arial;
    text-shadow: 1px 2px 3px black;
    color: #ffffff;
    text-decoration: none;
}
#Menu li a:hover{
    text-shadow: 1px 2px 3px black;
    color: #C8C8C8;
}
.sub-menu {
    display: none;
} 
#Menu li:hover .sub-menu{    
    display: block;
    position:absolute;
    list-style: none;
    margin-left: -9px;
    font-size: 12pt;
    width: 150px;
    height: 150px;
    background:#006600; 
}

@Ukkas · 05.03.2014, 15:41

Harts, все правильно, у вас нигде не задавался стиль .sub-menu li поэтому и использовался родительский.

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
#Menu{
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 160px;
        left: 15px; 
    }
    #Menu li {
        cursor: pointer;
        float: left;
        padding: 0px 7px;
        border-right: 1px solid #397159;
        border-left: 1px solid #023301;
    }
    #Menu li a{
        font-size: 18pt Arial;
        text-shadow: 1px 2px 3px black;
        color: #ffffff;
        text-decoration: none;
    }
    #Menu li a:hover{
        text-shadow: 1px 2px 3px black;
        color: #C8C8C8;
    }
    .sub-menu {
        display: none;
    } 
    #Menu li:hover .sub-menu{    
        display: block;
        position:absolute;
        list-style: none;
        margin-left: -9px;
        width: 150px;
        height: 150px;
        background:#006600; 
    }
    #Menu li:hover .sub-menu li {    
        font-size: 24pt;
    }

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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 полиномов. . .

Как сделать так чтобы подсписок списка имел свой стиль?

Решение