Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
 Аватар для KaRaNTiN
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2

Горизонтальное меню

10.02.2010, 20:47. Показов 2373. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!)... Прошу Вашего совета в помощи корректирования созданного мною горизонтального меню на css

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
<div class="container"> 
 
    <ul id="topnav">
        <li><a href="#">Главная</a></li>
        <li>
 
            <a href="#">О нас</a>
            <span>
                <a href="#">История</a> 
                <a href="#">Администрация</a> 
                <a href="#">Преподаватели</a>
                <a href="#">Студ.совет</a>
            </span>
        </li>
 
        <li>
            <a href="#">Абитуриенту</a>
            <span>
                <a href="#">Специальности</a> 
                <a href="#">Правила поступления</a> 
                <a href="#">Курсы</a>
            </span>
 
        </li>
        <li>
            <a href="#">Студенту</a>
            <span>
                <a href="#">Новости</a> 
                <a href="#">Расписание</a> 
                <a href="#">Библиотека</a> 
                <a href="#">Нормативно-правовая база</a> 
            </span>
        </li>
        <li><a href="#">Связь</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
ul#topnav {
    margin: 0; padding: 0;
    float: left;
    list-style: none;
    position: relative;
    font-size: 15px;
        background: url(but2.gif) repeat-x;
}
li {
        color:black;
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
 li a {
    padding: 10px 15px;
    display: block;
    color: #ffffff;
    text-decoration: none;
}
li:hover { background: url(but2.gif) repeat-x; }
li span {
        font-size: 15px;
        width: auto;
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    background: url(but2.gif) repeat-x;
    color: #ffffff;
}
 
li:hover span { display: block; }
li span a { display: inline; }
li span a:hover {text-decoration: underline;}
Единственное,что я не знаю - это как сделать сл. пункты:

1. Подменю должно начинаться от того пункта, к которому оно относится и идти вправо
2. Ширина подменю должна выставляться автоматически, в зависимости от длины слов, а не как на скриншоте подпункт "Нормативно-правовая база" урезано, а "Студ.совет" в "Абитуриенте" вообще исчез).

Помогите, пожалуйста!!.. Исходничек есть)..О4ень прошу помощи)
Миниатюры
Горизонтальное меню  
Вложения
Тип файла: rar меню_исходники.rar (3.2 Кб, 35 просмотров)
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
10.02.2010, 20:47
Ответы с готовыми решениями:

Изменить горизонтальное меню - сделать автозакрытие выпадающего меню после отвода курсора
Вообщем что имеем: http://test.aowserv.ru имеется горизонтальное меню, при наведении на кнопку Пример появляется выпадающее меню. вообщем...

Горизонтальное меню
Помогите плиз с кодом. У меня есть код вертикального меню: &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot;...

Горизонтальное меню
А вот еще такой вопросик возник. Нашел вот такое горизонт. меню. Как его правильно подключить, что бы оно работало??? Если...

1
 Аватар для KaRaNTiN
44 / 44 / 11
Регистрация: 10.06.2009
Сообщений: 311
Записей в блоге: 2
15.02.2010, 20:05  [ТС]
Помогите, пожалуйста!)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.02.2010, 20:05
Помогаю со студенческими работами здесь

горизонтальное меню
не делается горизонтальное меню =( Делала двумя вариантами: &lt;!DOCTYPE html &gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta...

Горизонтальное меню
Делаю горизонтальное меню, написал всё, что надо, но всегда вот это происходит &lt;div class=&quot;heder&quot;&gt; &lt;div...

Горизонтальное меню
Всем привет! При попытке сделать горизонтальное меню с выпадающим столкнулся с непонятными для себя явлениями, выполняя условия...

горизонтальное меню
Всем привет. Хочу сделать горизонтальное меню на всю ширину блока страницы (1000px) (на первую кнопку наведен курсор, по этому она...

Горизонтальное меню
в верхнем горизонтальном меню пункты меню не все размещаются на одной линии. 5 пунктов меню стоят на месте а остальные слетают на вторую...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Киев стоит - украинская песня
zorxor 28.01.2026
wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью 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 и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru