Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.70/30: Рейтинг темы: голосов - 30, средняя оценка - 4.70
good_man
1

Css вывести 3й уровень выпадающего меню

08.07.2013, 23:33. Показов 5672. Ответов 1
Метки нет (Все метки)

Взываю к отцам css! Пользуясь справочником набросал себе выпадающее меню, всё вроде хорошо, вот только не могу корректно разместить 3й уровень, нужно что бы он выводился справа от родительского пункта и соответственно начинался от его верхней кромки (типичное вообщемто поведение для выпадающего меню), как сделать это с фиксированной высотой родительского <li> я знаю, просто ставишь position:relative; и дальше уже всё решают top и left, но как быть если длинна содержимого <li> заранее не известна и нельзя установить фиксированные значения?

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.07.2013, 23:33
Ответы с готовыми решениями:

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

Нужен совет по css для выпадающего меню
Структура меню &lt;ul class=&quot;nice-menu1&quot;&gt; &lt;li&gt;&lt;a...&lt;/li&gt; &lt;li&gt;&lt;a...&lt;/li&gt; &lt;li&gt; &lt;a...&gt; ...

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

CSS Первый уровень списка
Коллеги, подскажите &lt;ol id=&quot;languages&quot;&gt; &lt;li&gt;Славянские языки &lt;ol&gt; ...

1
694 / 534 / 40
Регистрация: 22.06.2009
Сообщений: 1,293
09.07.2013, 07:21 2
Лучший ответ Сообщение было отмечено как решение

Решение

Просто в процентах все указываешь и все. Второй пункт сделал выпадающим:
http://jsfiddle.net/Alorian/Nb4A2/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id="menu">
    <li>Test 1</li>
    <li>
        Test 2
        <ul>
            <li>Test 2.1</li>
            <li>
                Test 2.2
                <ul>
                    <li>Test 2.2.1</li>
                    <li>Test 2.2.2</li>
                    <li>Test 2.2.3</li>
                </ul>
            </li>
            <li>Test 2.3</li>
        </ul>
    </li>
    <li>Test 3</li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
#menu{width:500px; margin:0; padding:0; list-style-type:none; white-space:nowrap;}
#menu ul{margin:0; padding:0; list-style-type:none;}
 
#menu > li {float:left; position:relative;}
#menu > li > ul {display:none; position:absolute; left:0; top:100%; }
#menu > li:hover > ul {display:block;}
#menu > li > ul > li {position:relative;}
#menu > li > ul > li > ul{display:none; position:absolute; left:100%; top:0;}
#menu > li > ul > li:hover > ul{display:block;}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.07.2013, 07:21

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Отключить верхний уровень выпадающего меню при наведении
Доброго времени суток! Верстаю ХТМЛ шаблона для Жумла 2.5. Есть верхнее меню стили в котором задаю...

Не могу вывести третий уровень меню
Здравствуйте я совсем недавно в битриксе, пришел на этот сайт после прошлых программистов, по какой...

Оптмизация выпадающего меню
я создал выпадающее меню в одной таблице, при наведении выпадает всё что нужно, но если этот список...

Создание выпадающего меню
Всем привет. При создании виндовс формы возник вопрос, как создать выпадающее меню, которое должно...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.