Сделать верхнее меню, чтоб подпункты выпадали

@Bars999 · Регистрация: 14.12.2013

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

titanspower.ru - сайт верхняя строка меню ( нужно чтоб были подпункты)

Вот html код:

HTML5
1
2
3
4
5
6
7
8
9
              <ul class="reset topmenu">
                <li><span class="tmr"><a href="/">Главная</a></span></li>
                <li><span class="tml"><span class="tmr"><a href="http://w3.dwar.ru/clan_info.php?clan_id=689_3" target="_blank">Информация</a></span></span></li>
                <li><span class="tml"><span class="tmr"><a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=members" target="_blank">Состав клана</a></span></span></li>
                <li><span class="tml"><span class="tmr"><a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=law" target="_blank">Устав</a></span></span></li>
                <li><span class="tml"><span class="tmr"><a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=history" target="_blank">История</a></span></span></li>
                <li><span class="tml"><span class="tmr"><a href="http://w3.dwar.ru/citadel_view.php?clan_id=689" target="_blank">Цитадель</a></span></span></li>
                <li><span class="tml"><span class="tmr"><a href="/resources.html">Клановые ресурсы</a></span></span></li>
                </ul>

@Padimanskas · 14.12.2013, 02:39

Дорогой Bars999, у вас первые признаки синдрома дармофилии. Предлагаю излечится трудом и ученьем.
Но прежде, подобающе оформите код.

@Bars999 · 14.12.2013, 02:42 **[ТС]**

Padimanskas,
Привет просто уже 3 дня голову ломал как сделать не получается(

@Padimanskas · 14.12.2013, 02:50

У вас должно получиться нечто вроде этого:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
    <li>1 <!-- Выпадающее меню -->
        <ul>
            <li>1.1</li> <!-- Пункт выпадающего меню -->
            <li>1.2</li> <!-- Пункт выпадающего меню -->
            <li>1.3</li> <!-- Пункт выпадающего меню -->
        </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

@Bars999 · 14.12.2013, 02:55 **[ТС]**

Padimanskas,
Это понятно) а в css что вставить а то не работает( просто цвет верхнего меню хорошо подобран

@Мусаси · 14.12.2013, 02:58

А что именно не получается? - 1-й вопрос
Зачем в каждом списке, начиная с 2-го ты дважды создаёшь класс tml? - 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
<ul class="reset topmenu">
 
    <li>
        <span class="tmr">
            <a href="/">Главная</a>
        </span>
    </li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="http://w3.dwar.ru/clan_info.php?clan_id=689_3" target="_blank">Информация</a>
            </span>
        </span></li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=members" target="_blank">Состав клана</a>
            </span>
        </span>
    </li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=law" target="_blank">Устав</a>
            </span>
        </span>
    </li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="http://w3.dwar.ru/clan_info.php?clan_id=689&mode=history" target="_blank">История</a>
            </span>
        </span>
    </li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="http://w3.dwar.ru/citadel_view.php?clan_id=689" target="_blank">Цитадель</a>
            </span>
        </span></li>
    <li>
        <span class="tml">
            <span class="tmr">
                <a href="/resources.html">Клановые ресурсы</a>
            </span>
        </span>
    </li>
</ul>

@Bars999 · 14.12.2013, 03:02 **[ТС]**

Мусаси,
Спасибо я не такой опытный как ты)
А я хочу чтоб еще при наведении на любую кнопку была подкатегория, и с похожим цветом

@Мусаси · 14.12.2013, 03:12

Я правильно понял, что при нажатии на ссылку ты должен переместиться на др.страницу?

@Bars999 · 14.12.2013, 03:17 **[ТС]**

Мусаси,

нет мне нужно простое выпадающее меню, вот к примеру как тут http://scriptsite.ru/examples/... sult1.html

Но так чтоб цвета сохранились

@Мусаси · 14.12.2013, 03:33

В общем вот код этой страницы

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
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
100
101
102
103
104
105
106
107
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
 
<body>
 
<div id="header">
    <ul id="menu">
        <li><a href="#">Раздел1</li></a><li>
        <a href="#">Раздел2</a>
            <ul>
                <li><a href="#">Подраздел1</li></a>
                <li><a href="#">Большой подраздел2</li></a>
                <li><a href="#">Подраздел3</li></a>
            </ul>
        </li><li>
        <a href="#">Раздел2</a>
            <ul>
                <li><a href="#">Подраздел1</li></a>
                <li><a href="#">Подраздел2</li></a>
                <li><a href="#">Подраздел3</li></a>
                <li><a href="#">Длинный пункт, который может занять несколько строк</li></a>
                <li><a href="#">Подраздел5</li></a>
                <li><a href="#">Подраздел6</li></a>
                <li><a href="#">Подраздел7</li></a>
            </ul>
        </li>       
    </ul>
</div>
<style>
body{margin:0; background-color:#f0f0f0;}
    
    ul, li {
        margin:0;
        padding:0;
        list-style-type:none;   
    }
    
    #menu {
        font-family:Verdana, Geneva, sans-serif;
        font-size:14px;
        display:block;
        position:absolute;
        top:100px;
        left:50px;
            
    }
    #menu > li {
        display:inline-block;
        position:relative;
 
    }
    
    #menu > li > a {
        display:inline-block;
        height:20px;
        padding:10px;
        background-color:#f5f5f5;
        border-top:1px solid #FFF;
        border-left:1px solid #FFF;
        border-bottom:1px solid #ddd;
        border-right:1px solid #ddd;
        border-radius:5px;                      
    }
    #menu > li:hover > a {
        color:#009999;  
    }
    #menu > li > ul {
        position:absolute;
        top:42px;
        left:0px;
        display:none;   
    }
    #menu > li:hover > ul {
        display:block;  
        box-shadow:1px 1px 5px #ddd;
    }
    
    #menu > li:hover > ul > li {
        display:inline-block;
    }
    #menu > li:hover > ul > li > a {
        display:inline-block;
        width:200px;
        padding:10px;
        background-color:#f2f2f2;
    
    border-top:1px solid #FFF;
    border-left:1px solid #FFF;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    border-radius:5px;  
        
    }
    a {
        text-decoration:none;
        color:#242424;  
    }
    a:hover {
        color:#009999;  
    }
    
 
</style>
</html>

Такое меню задаётся с помощью тегов CSS. Это ты заметишь в теге <Style></style> Здесь задают и расположение твоего меню, цвет, шрифт, выпадающий блок и т.п.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	14.12.2013, 02:39
	Дорогой Bars999, у вас первые признаки синдрома дармофилии. Предлагаю излечится трудом и ученьем. Но прежде, подобающе оформите код. 0

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	14.12.2013, 02:42 [ТС]
	Padimanskas, Привет просто уже 3 дня голову ломал как сделать не получается( 0

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	14.12.2013, 02:55 [ТС]
	Padimanskas, Это понятно) а в css что вставить а то не работает( просто цвет верхнего меню хорошо подобран 0

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	14.12.2013, 03:02 [ТС]
	Мусаси, Спасибо я не такой опытный как ты) А я хочу чтоб еще при наведении на любую кнопку была подкатегория, и с похожим цветом 0

@Мусаси 9 / 9 / 2 Регистрация: 07.05.2013 Сообщений: 227
	14.12.2013, 03:12
	Я правильно понял, что при нажатии на ссылку ты должен переместиться на др.страницу? 0

@Bars999 0 / 0 / 0 Регистрация: 14.12.2013 Сообщений: 52
	14.12.2013, 03:17 [ТС]
	Мусаси, нет мне нужно простое выпадающее меню, вот к примеру как тут http://scriptsite.ru/examples/... sult1.html Но так чтоб цвета сохранились 0