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

@KaRaNTiN · Регистрация: 10.06.2009

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

Здравствуйте!)... Прошу Вашего совета в помощи корректирования созданного мною горизонтального меню на 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ень прошу помощи)

@KaRaNTiN · 15.02.2010, 20:05 **[ТС]**

Помогите, пожалуйста!)

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

@KaRaNTiN 44 / 44 / 11 Регистрация: 10.06.2009 Сообщений: 311 Записей в блоге: 2
	15.02.2010, 20:05 [ТС]
	Помогите, пожалуйста!) 0