Css многоуровневое меню горизонтальное: Горизонтальное выпадающее многоуровневое меню
Содержание
Меню многоуровневое горизонтальное и вертикальное CSS
Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао
Приведённый код позволяет создавать неограниченное количество выплывающих вложений не изменяя стилей и легко трансформируется из горизонтального в вертикальное.
Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.
Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.
1. Вертикальное
2. Горизонтальное
Код:
HTML
<div>
<ul>
<li><a href="">Meny1</a>
<ul>
<li><a href="">Meny 1-2</a>
<ul>
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul>
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul>
<li><a href="">Meny 2-1</a>
<ul>
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul>
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.
Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.
CSS
.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
width: 200px;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;
}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
Желаю творческих успехов.
В раздел > > >
Запись опубликована в рубрике CSS основы, HTML основы. Добавьте в закладки постоянную ссылку.
Многоуровневое горизонтальное меню на HTML и CSS
В продолжение темы про меню я хочу описать еще один вид меню – многоуровневое меню. Если у вас на сайте имеется большое количество разделов – это то что вам нужно.
Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.
HTML
Разметка для нашего меню отличается от исходного только пару строчками, а именно еще одним вложенным списком уже во вложенный ранее список.
<ul>
<li><a href="#">О нас</a></li>
<li>
<a href="#">Статьи</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li>
<a href="#">jQuery</a>
<ul>
<li><a href="#">Вступление</a></li>
<li><a href="#">Начальный</a></li>
<li><a href="#">Продвинутый</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Видео курс</a>
</li>
<li>
<a href="#">Материалы</a>
</li>
<li>
<a href="#">Форум</a>
</li>
</ul>CSS
Стили особого изменения тоже не потерпят. Мы только подвинем наш “вдвойне вложенный” список немного вправо, а все остальное действует аналогично.
#menu {
padding: 0;
margin: 0;
font-family: Verdana;
}
#menu li {
list-style: none;
float: left;
height: 30px;
padding: 0;
margin: 0;
width: 150px;
text-align: center;
background: #95DF8E;
position: relative;
padding-top: 12px;
}
#menu li ul{
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
left: 0;
top: 42px;
}
#menu li ul li{
float: none;
height: 30px;
margin: 0;
width: 150px;
text-align: center;
background: #95DF8E;
}
#menu li a{
display: block;
width: 150px;
height: 30px;
color: #006A35;
text-decoration: none;
}
#menu li:hover ul{
display: block;
}
#menu li:hover{
background: #35C835;
}
#menu li ul li ul{
left:150px;
top: 0;
}
#menu li ul li ul li{display: none;}
#menu li ul li:hover ul li{display: block;}Готово
Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)
CSS горизонтальное меню с 3-м подменю отображается вертикально
Это многоуровневое горизонтальное меню. Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й &-й уровень останется горизонтальным)
Поэтому, если я наведу указатель мыши на продукты, он будет содержать список жестких дисков, мониторов и динамиков… горизонтально. Однако, когда я навожу колонки, теперь они должны перечислять 10 Уолтов, 20 Уолтов … вертикально, как выпадающий список.
Можно ли это сделать? Пожалуйста помочь.
<style>
/**
* horizontal navigation (SO)
*/
body {
background: url('.jpg') 50% 50%;
}
/* Targeting both first and second level menus */
#nav {position: relative;}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Hard Drives</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Speakers</a>
<ul>
<li><a href="#">10 watt</a></li>
<li><a href="#">20 watt</a></li>
<li><a href="#">30 watt</a></li>
</ul>
</li>
<li><a href="#">Random Equipment</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Repairs</a></li>
<li><a href="#">Installations</a></li>
<li><a href="#">Setups</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
jsFiddle демо: http://jsfiddle.net/fJQ59/
css
Поделиться
Источник
Milacay
28 декабря 2012 в 18:07
2 ответа
- ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное
У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии на пункт главного меню. Я тоже хочу: укажите, какой пункт меню выбран, выделив / выделив жирным…
- CSS выпадающее меню — неверный размер подменю
Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css: http://pastebin.com/Kpx4s3fH Текст просто складывается обратно. EDIT: и html http://pastebin.com/xaC0kvud
1
Добавьте в свой стиль следующие коды
#nav li ul li ul li { display: block; float: none; }
Поделиться
Mayki Nayki
28 декабря 2012 в 18:23
1
Вот отправная точка для вас:
HTML
<ul>
<li>
Option One
<ul>
<li>
Second Row One
<ul>
<li>
Third Row One
</li>
<li>
Third Row Two
</li>
<li>
Third Row Three
</li>
</ul>
</li>
<li>
Second Row Two
</li>
</ul>
</li>
<li>
Option Two
</li>
<li>
Option Three
</li>
</ul>
CSS
ul {
width: 600px;
list-style-type: none;
}
ul > li,
ul > li > ul > li {
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
float: none;
}
li > ul {
display: none;
}
li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
Посмотреть на JSFiddle
Поделиться
jamesplease
28 декабря 2012 в 18:23
Похожие вопросы:
Горизонтальное подменю вертикальное меню с помощью Bootstrap
Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…
css горизонтальное навигационное меню плавает справа, вертикальные подменю не выровнены с главным меню
Я создал горизонтальное навигационное меню в css, плавающее слева. Это прекрасно работает. Когда я меняю поплавок вправо (и меняю порядок li верхнего уровня), все в порядке, за исключением того, что…
CSS выпадающее меню с горизонтальным подменю
У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…
ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное
У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…
CSS выпадающее меню — неверный размер подменю
Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css:…
CSS Горизонтальное Подменю
в основном у меня есть бок о бок горизонтальное меню, как вы можете видеть здесь: http://www.дополнения-today.co.uk/walnutgarth4/availability.php то, что я пытаюсь сделать, это сделать так, чтобы…
html горизонтальное меню отображается вертикально на firefox 4
я только что пошел тестировать сайт в firefox 4 (бета-версия 10), и горизонтальное меню отображается вертикально. В chrome меню горизонтально, как это: но в firefox 4 он появляется вот так: Я…
Горизонтальное меню с вертикальным подменю
Мне нужно горизонтальное меню с вертикальными подменю , которые взяты из базы данных сервера SQl, мне нужно вертикальное подменю с полосами прокрутки, может кто-нибудь дать мне ссылку на такое меню.
css подменю меню горизонтальное
Как я могу создать css меню и подменю, как это. Когда я щелкаю или перемещаю мышь по меню, оно имеет маленький значок внизу
CSS подменю меню не отображается
У меня возникла проблема CSS с меню на старом сайте, над которым недавно работали. Проблема в том, что подменю под главным меню отображается как очень тонкая линия без возможности выбрать какой-либо…
dropdown » Скрипты для сайтов
7 650
Скрипты / Menu & Nav
Mega dropdown меню
Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
13 879
Скрипты / Accordion
Вертикальное accordion меню
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.
5 175
Скрипты / Accordion
Flat accordion menu — вертикальный аккордеон
Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.
15 881
Скрипты / Menu & Nav
Адаптивное много-уровневое меню
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css
7 087
Скрипты / Menu & Nav
Адаптивное многоуровневое меню
Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.
5 475
Скрипты / Menu & Nav
Выпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
6 117
Скрипты / Menu & Nav
Дерево меню на jQuery
Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.
4 256
Скрипты / Menu & Nav
Горизонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.
2 185
Скрипты / Menu & Nav
Меню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.
5 041
Скрипты / Menu & Nav
Выпадающее адаптивное меню
Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.
3 196
Скрипты / Menu & Nav
Многоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
2 951
Скрипты / Menu & Nav
Выпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
Многоуровневое вертикальное меню
<div>
<ul>
<li>
<a href=»#»>Пункт меню 1</a>
<input type=»checkbox» checked=»checked» />
<label for=»1″></label>
<ul>
<li>
<a href=»#»>Пункт меню 1.1</a>
<input type=»checkbox» checked=»checked»/>
<label for=»1.1″></label>
<ul>
<li>
<a href=»#»>Пункт меню 1.1.1</a>
</li>
<li>
<a href=»#»>Пункт меню 1.1.2</a>
</li>
<li>
<a href=»#»>Пункт меню 1.1.3</a>
</li>
</ul>
</li>
<li>
<a href=»#»>Пункт меню 1.2</a>
</li>
<li>
<a href=»#»>Пункт меню 1.3</a>
</li>
</ul>
</li>
<li>
<a href=»#»>Пункт меню 2</a>
<input type=»checkbox» />
<label for=»2″></label>
<ul>
<li>
<a href=»#»>Пункт меню 2.1</a>
</li>
<li>
<a href=»#»>Пункт меню 2.2</a>
</li>
<li>
<a href=»#»>Пункт меню 2.3</a>
</li>
<li>
<a href=»#»>Пункт меню 2.4</a>
</li>
</ul>
</li>
<li>
<a href=»#»>Пункт меню 3</a>
<input type=»checkbox» />
<label for=»3″></label>
<ul>
<li>
<a href=»#»>Пункт меню 3.1</a>
</li>
<li>
<a href=»#»>Пункт меню 3.2</a>
</li>
</ul>
</li>
<li>
<a href=»#»>Пункт меню 4</a>
<input type=»checkbox» />
<label for=»4″></label>
<ul>
<li>
<a href=»#»>Пункт меню 4.1</a>
</li>
<li>
<a href=»#»>Пункт меню 4.2</a>
</li>
<li>
<a href=»#»>Пункт меню 4.3</a>
</li>
</ul>
</li>
</ul>
</div>
Создаем горизонтальное меню CSS
В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.
Создаем горизонтальное меню CSS
Для написания сценария можете использовать любой HTML редактор, но не забудьте сохранить файл с расширением .HTML.
Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a>
<ul>
<li><a href=”#”>Link2.1</a></li>
<li><a href=”#”>Link2.2</a></li>
<li><a href=”#”>Link2.3</a></li>
</ul>
</li>
<li><a href=”#”>Link3</a>
<ul>
<li><a href=”#”>Link3.1</a></li>
<li><a href=”#”>Link3.2</a></li>
</ul></li>
<li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>Теперь, если вы откроете эту HTML — страницу в браузере, она будет выглядеть, как показано ниже. Далее мы добавим CSS код для позиционирования горизонтального меню с подменю для сайта.
• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4
Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:
<style>
/* Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
}
</style>После добавления CSS:
Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
border-radius: 50px;
}После добавления CSS:
Он выглядит лучше, правда?
Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}После добавления CSS:
Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #CC6600;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}После добавления CSS:
Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:
#menu li:hover > a{
color: #CC3333;
}Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
background: #222; }
#menu li:hover > ul{
display: block;
}После добавления CSS:
Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}После добавления CSS:
На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.
Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:
#menu ul li:first-child a:after{
content: ”;
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #FF0000;
}После добавления CSS:
Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:
После добавления CSS:
Мы могли бы добавить еще больше свойств, чтобы придать меню более профессиональный вид. Но это наше первое горизонтальное меню для сайта, поэтому не будем усложнять его. Если у вас есть какие — либо вопросы, задайте их нам.
Данная публикация является переводом статьи «Create horizontal menu bar using HTML and CSS» , подготовленная редакцией проекта.
» Создание меню :: Горизонтальное :: Многоуровневое меню
<div>
<ul>
<!— Пункт меню 1 —>
<li><a href=»#»>Пункт 1</a>
<ul>
<li><a href=»#»>подпункт 1.1</a></li>
<li><a href=»#»>подпункт 1.2</a>
<ul>
<li><a href=»#»> подпункт 1.2.1 </a>
<ul>
<li><a href=»#»> подпункт 1.2.1.1 </a></li>
<li><a href=»#»> подпункт 1.2.1.2</a>
<ul>
<li><a href=»#»> подпункт 1.2.1.2.1 </a></li>
<li><a href=»#»> подпункт 1.2.1.2.2</a></li>
<li><a href=»#»> подпункт 1.2.1.2.3</a></li>
<li><a href=»#»> подпункт 1.2.1.2.4</a></li>
<li><a href=»#»> подпункт 1.2.1.2.5</a></li>
</ul>
</li>
<li><a href=»#»> подпункт 1.2.1.3</a></li>
<li><a href=»#»> подпункт 1.2.1.4</a></li>
<li><a href=»#»> подпункт 1.2.1.5</a></li>
</ul>
</li>
<li><a href=»#»> подпункт 1.2.2</a>
<ul>
<li><a href=»#»> подпункт 1.2.2.1 </a></li>
<li><a href=»#»> подпункт 1.2.2.2 </a></li>
<li><a href=»#»> подпункт 1.2.2.3 </a></li>
<li><a href=»#»> подпункт 1.2.2.4 </a></li>
<li><a href=»#»> подпункт 1.2.2.5 </a></li>
</ul>
</li>
<li><a href=»#»> подпункт 1.2.3</a></li>
<li><a href=»#»> подпункт 1.2.4</a></li>
<li><a href=»#»> подпункт 1.2.5</a>
<ul>
<li><a href=»#»> подпункт 1.2.5.1 </a></li>
<li><a href=»#»> подпункт 1.2.5.2</a></li>
<li><a href=»#»> подпункт 1.2.5.3</a></li>
<li><a href=»#»> подпункт 1.2.5.4</a></li>
<li><a href=»#»> подпункт 1.2.5.5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»#»>подпункт 1.3</a>
<ul>
<li><a href=»#»> подпункт 1.3.1 </a></li>
<li><a href=»#»> подпункт 1.3.2 </a></li>
<li><a href=»#»> подпункт 1.3.3 </a></li>
<li><a href=»#»> подпункт 1.3.4 </a></li>
<li><a href=»#»> подпункт 1.3.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 1.4</a></li>
<li><a href=»#»>подпункт 1.5</a>
<ul>
<li><a href=»#»>подпункт 1.5.1 </a></li>
<li><a href=»#»> подпункт 1.5.2</a></li>
<li><a href=»#»> подпункт 1.5.3</a></li>
<li><a href=»#»> подпункт 1.5.4</a></li>
<li><a href=»#»> подпункт 1.5.5</a></li>
</ul>
</li>
</ul>
</li>
<!— Пункт меню 2 —>
<li><a href=»#»>Пункт 2</a>
<ul>
<li><a href=»#»>подпункт 2.1</a>
<ul>
<li><a href=»#»> подпункт 2.1.1 </a>
<ul>
<li><a href=»#»> подпункт 2.2.1.1 </a></li>
<li><a href=»#»> подпункт 2.2.2.2 </a></li>
<li><a href=»#»> подпункт 2.2.3.3 </a></li>
<li><a href=»#»> подпункт 2.2.4.4 </a></li>
<li><a href=»#»> подпункт 2.2.5.5 </a></li>
</ul>
</li>
<li><a href=»#»> подпункт 2.1.2</a></li>
<li><a href=»#»> подпункт 2.1.3</a></li>
<li><a href=»#»> подпункт 2.1.4</a></li>
<li><a href=»#»> подпункт 2.1.5</a></li>
</ul>
</li>
<li><a href=»#»>подпункт 2.2</a></li>
<li><a href=»#»>подпункт 2.3</a></li>
<li><a href=»#»>подпункт 2.4</a></li>
<li><a href=»#»>Длинный подпункт, длинный подпункт</a></li>
</ul>
</li>
<!— Пункт меню 3 —>
<li><a href=»#»>Длинный пункт меню 3</a>
<ul>
<li><a href=»#»>подпункт 3.1</a>
<ul>
<li><a href=»#»> подпункт 3.1.1 </a></li>
<li><a href=»#»> подпункт 3.1.2 </a></li>
<li><a href=»#»> подпункт 3.1.3 </a></li>
<li><a href=»#»> подпункт 3.1.4 </a></li>
<li><a href=»#»> подпункт 3.1.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 3.2</a>
<ul>
<li><a href=»#»> подпункт 3.2.1 </a></li>
<li><a href=»#»> подпункт 3.2.2 </a></li>
<li><a href=»#»> подпункт 3.2.3 </a></li>
<li><a href=»#»> подпункт 3.2.4 </a></li>
<li><a href=»#»> подпункт 3.2.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 3.3</a></li>
<li><a href=»#»>подпункт 3.4</a></li>
<li><a href=»#»>подпункт 3.5</a></li>
</ul>
</li>
<!— Пункт меню 4 —>
<li><a href=»#»>Пункт 4</a>
<ul>
<li><a href=»#»>подпункт 4.1</a>
<ul>
<li><a href=»#»> подпункт 4.1.1 </a></li>
<li><a href=»#»> подпункт 4.1.2 </a></li>
<li><a href=»#»> подпункт 4.1.3 </a></li>
<li><a href=»#»> подпункт 4.1.4 </a></li>
<li><a href=»#»> подпункт 4.1.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 4.2</a></li>
<li><a href=»#»>подпункт 4.3</a>
<ul>
<li><a href=»#»> подпункт 4.3.1 </a></li>
<li><a href=»#»> подпункт 4.3.2 </a></li>
<li><a href=»#»> подпункт 4.3.3 </a></li>
<li><a href=»#»> подпункт 4.3.4 </a></li>
<li><a href=»#»> подпункт 4.3.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 4.4</a></li>
<li><a href=»#»>подпункт 4.5</a></li>
</ul>
</li>
<!— Пункт меню 5 —>
<li><a href=»#»>Пункт 5</a>
<ul>
<li><a href=»#»>подпункт 5.1</a>
<ul>
<li><a href=»#»> подпункт 5.1.1 </a></li>
<li><a href=»#»> подпункт 5.1.2 </a></li>
<li><a href=»#»> подпункт 5.1.3 </a></li>
<li><a href=»#»> подпункт 5.1.4 </a></li>
<li><a href=»#»> подпункт 5.1.5 </a></li>
</ul>
</li>
<li><a href=»#»>подпункт 5.2</a></li>
<li><a href=»#»>подпункт 5.3</a></li>
<li><a href=»#»>подпункт 5.4</a></li>
<li><a href=»#»>подпункт 5.5</a></li>
</ul>
</li>
</ul>
</div>
html — трехуровневое меню CSS с первым слоем в горизонтальной компоновке
html — трехуровневое меню CSS с первым слоем в горизонтальной компоновке — qaru
Спросил
Просмотрено
7к раз
Я хочу, чтобы верхний уровень ul li s был расположен горизонтально, а затем последующие уровни располагались вертикально, предпочтительно с небольшим отступом по мере снижения уровней, под их родительским li .
Не после какой-либо функции наведения, просто красивый макет, примерно так:
Верхний элемент 1 Верхний элемент 2 Верхний элемент 3
подпункт 1 подпункт 1 подпункт 1
подпункт 2 подпункт 2 подпункт 2
подпункт 1 подпункт 3 подпункт 3
подпункт 2 подпункт 4 подпункт 4
подпункт 5 подпункт 5 подпункт 5
случайный
9,4121010 золотых знаков6464 серебряных знака7878 бронзовых знаков
Создан 20 янв.
Энди Энди
2511 серебряных знаков33 бронзовых знака
2
Как насчет этого:
Live Demo
CSS:
#footer {
перелив: авто;
фон: #ddd
}
.external {
стиль списка: нет;
ширина: 33%;
плыть налево;
маржа: 0;
заполнение: 0
}
.первый {
font-weight: жирный
}
.outer ul {
стиль списка: нет;
маржа: 0;
отступ: 0 0 0 18 пикселей
}
HTML:
Создан 20 янв.
тридцать точек
213k4545 золотых знаков381381 серебряный знак340340 бронзовых знаков
3
Или, если вам нужен чистый css, как насчет чего-то вроде этого:
http: // jsfiddle.net / pLFqd / 2/
Изменить: Пропустил бит о том, что не требуется функциональность наведения, попробуйте простой пример, прикрепленный
Создан 20 янв.
Хоуксби
2,7681717 серебряных знаков2929 бронзовых знаков
1
вот материал для копирования и вставки, с которым можно поиграть:
<стиль>
li.level1 {float: left; дисплей: встроенный; margin-right: 20 пикселей}
ul.level2 {display: inline}
li.level2 {дисплей: блок; padding-left: 20px}
ul.level3 {display: inline}
li.level3 {display: block; padding-left: 20px}
- яблоко
- банан
- банан 1
- банан 1 А
- банан 1 млрд.
- банан 2
- вишня
- вишня 1
- вишня 2
- дддд
Создан 20 янв.
Деркшар
1,93622 золотых знака1212 серебряных знаков2626 бронзовых знаков
lang-html
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
css — горизонтальное меню с несколькими подменю
css — горизонтальное меню с несколькими подменю — qaru
Спросил
Просмотрено
4к раз
Я создал меню с несколькими подменю.Я искал способы сделать выпадающие подменю горизонтальным образом от исходного меню до подменю, а затем до последнего подменю (которое я иногда могу получить случайно, но затем я все облажаю и возвращаюсь к своему оригинальное горизонтальное меню с вертикальными подменю). Я пробовал изменить их на встроенный блок, статический и блочный, но я не могу заставить его работать. Есть способ попроще? Что мне не хватает?
/ * Меню панели навигации * /
nav {
цвет: # F00;
минимальная ширина: 100%;
}
nav ul {
отступ: 0;
маржа: 0;
стиль списка: нет;
положение: относительное;
}
nav ul li {
дисплей: встроенный блок;
float: нет;
белое пространство: nowrap;
}
nav a {
дисплей: блок;
отступ: 0 10 пикселей;
цвет: # F00;
размер шрифта: 20 пикселей;
высота строки: 30 пикселей;
текстовое оформление: нет;
}
nav a: hover {
цвет: #FFF;
цвет фона: #CCC;
переход: все.3с легкость;
}
nav ul ul {
дисплей: нет;
позиция: абсолютная;
верх: 100%;
}
nav ul li: hover> ul {
дисплей: наследовать;
переход: вся легкость .3s;
}
nav ul ul li {
минимальная ширина: 170 пикселей;
отображение: элемент списка;
положение: относительное;
}
nav ul ul ul {
позиция: абсолютная;
верх: 0;
осталось: 100%;
} Создан 03 окт.
Хайме Хайме
2111 серебряный знак22 бронзовых знака
0
Извините, если я что-то упускаю, но это то, что вы ищете?
https: // codepen.io / will0220 / ручка / VMMgMb
Это
nav ul ul li {
отображение: элемент списка;
}
Требует удаления свойства отображения, display: list-item принудительно помещает его в строки. Надеюсь это поможет!
Создан 03 окт.
будет
1,93711 золотых знаков1111 серебряных знаков1818 бронзовых знаков
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css html submenu или задайте свой вопрос.
lang-html
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
CSS Горизонтальное меню с 3-м подменю, отображаемое по вертикали
Это многоуровневое горизонтальное меню.Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й и 2-й уровни останутся горизонтальными)
Итак, если я наведу курсор на «Продукты», он отобразит жесткие диски, мониторы и динамики … по горизонтали. Однако, когда я наводил курсор на колонки, теперь он должен отображать 10 Уолтов, 20 Уолтов … вертикально, как раскрывающийся список.
Можно ли это сделать? Пожалуйста помоги.
<стиль>
/ **
* горизонтальная навигация (SO)
* /
тело {
фон: url ('. jpg') 50% 50%;
}
/ * Ориентация на меню первого и второго уровня * /
#nav {позиция: относительная;}
#nav li {
стиль списка: нет;
плыть налево;
}
#nav li a {
дисплей: блок;
отступ: 8px 12px;
текстовое оформление: нет;
}
#nav li a: hover {
цвет фона: красный;
цвет: #FFF;
непрозрачность: 1;
}
/ * Ориентация на меню первого уровня * /
#nav {
верх: 150 пикселей;
минимальная ширина: 850 пикселей;
фон: #fff;
непрозрачность: 0.5;
дисплей: блок;
высота: 34 пикс;
z-индекс: 100;
позиция: абсолютная;
}
#nav> li> a {
}
/ * Ориентация на меню второго уровня * /
#nav li ul {
цвет: # 333;
дисплей: нет;
позиция: абсолютная;
ширина: 850 пикселей;
}
#nav li ul li {
дисплей: встроенный;
}
#nav li ul li a {
фон: #fff;
граница: нет;
высота строки: 34 пикселя;
маржа: 0;
отступ: 0 8px 0 10px;
}
#nav li ul li a: hover {
цвет фона: красный;
цвет: #FFF;
непрозрачность: 1;
}
/ * Меню третьего уровня * /
#nav li ul li ul {
верх: 0;
}
ул.ребенок {
цвет фона: #FFF;
}
/ * Класс тока будет добавлен через jQuery * /
#nav li.current> a {
фон: # f7f7f7;
плыть налево;
}
/ * Резервный CSS * /
#nav li: hover> ul.child {
слева: 0;
верх: 34px;
дисплей: встроенный;
позиция: абсолютная;
выравнивание текста: слева;
}
#nav li: hover> ul.grandchild {
дисплей: блок;
}
…