Создал меню на css, но проблема в том, что выпадающее меню должно быть не прямо под пунктом меню, на которое навели курсор, а должно занимать всю ширину контейнера под пунктом меню, как на рисунке.
Подскажите, как это правильно реализовать на css?
Верхнее меню смещено вправо, слева ещё может быть логотип, т.е. напротив item1,item2,item3.
и чтобы было адаптивное выпадающее меню, т.е. при уменьшении разрешения выпадающее меню также занимало всю ширину.
и ещё нужны треугольники, как на рисунке при наведении на пункт меню.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width: 100%;
border: 1px solid gray;
padding: 20px;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.
wrapper:after{
content: '';
display: block;
clear: both;
overflow: hidden;
}
nav{
width: 50%;
float: right;
clear: both;
}
.item{
float: left;
margin-right: 30px;
}
.dropdown{
display: none;
}
.drop:hover + .dropdown{
display: block;
position: absolute;
width: 100%;
background: green;
border: 1px solid gray;
}
</style>
</head>
<body>
<header>
<div>
<nav>
<ul>
<li>
<a href="#">item1</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item2</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
<li>
<a href="#">item3</a>
<ul>
<li><p>item</p></li>
<li><p>item</p></li>
<li><p>item</p></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Видео-уроки по CSS, JavaScript, Bootstrap, CSS Grid, 1С Битрикс
Видео-уроки по CSS, JavaScript, Bootstrap, CSS Grid, 1С БитриксПОДПИСКА на УРОКИ
Email*
Выбери свою темуJavaScript HTML/CSS с нуля CSS Grid / Flexbox Bootstrap PHP PhpStorm Верстка с нуля 1С-Битрикс
Предложи новую тему
Соглашение на обработку перс.
данных *
Предоставлено SendPulse
В данном разделе Вашему вниманию предлагаются
Уроки не только освещают теорию, но и имеют практически примеры, которые будет полезны начинающему разработчику!
CSS3 Animation background-image | Практика CSS / HTML5
Разберем пример как вывести изображение через свойство background-image и сделать предварительную анимацию по наведению. Из урока вы узнаете как задействовать background, анимировать псевдо элементы ::before и ::after, и покажу как скрывать элементы …
- Денис Горелов
- 05.02.2020
- CSS и CSS3
- Просмотров: 0
7 урок: Описание в description (1C-Bitrix)
Мы с вами написали общий план и далее с чего начать разработать компонент в 1С-Битрикс? Первым делом нужно отобразить компонент в виртуальном дереве редактора.
Как это сделать? Смотрите в данном обучающем видео по описанию компонента в файле .descrip…
- Денис Горелов
- 08.10.2018
- Создание сайта
- Урок: 7
- Просмотров: 0
6 урок: План разработки компонента 1С-Битрикс
После того как установили 1С-Битрикс, внедрили в него HTML шаблон верстки сайта который писали сами или скачали с сети. Что делать дальше? Ведь сайт у нас отображается и перед нами стоит вопрос какой дальнейший план работ нужно провести. Так вот, в д…
- Денис Горелов
- 03.10.2018
- Создание сайта
- Урок: 6
- Просмотров: 0
5 урок: Устанавливаем наш ШАБЛОН в 1С-Битрикс
В данном выпуске покажу как зарегистрировать бесплатно Хостинг на 93 дня. Проведем его предварительную настроем под 1С-Битрикс, затем установим на него саму CMS и далее перенесем в нее шаблон из предыдущего урока с данной рубрики.
- Денис Горелов
- 03.10.2018
- Создание сайта
- Урок: 5
- Просмотров: 0
(УРОК — 3) Файловая структура простого компонента
Третий урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». В нем разберем более подробно файловую структуру компонентов. Познакомимся с содержанием таких файлов, как component, parameters, #description и разберем структуру фа…
- Денис Горелов
- 20.09.2018
- 1С-Битрикс
- Урок: 3
- Просмотров: 0
(УРОК-2) Размещение и подключение компонента
Второй урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». Тут рассмотрим, где компоненты размещаются в 1С-Битрикс. Как строится их наименование и что такое пространство имен. Как устанавливать компонент на странице, а также .
..
- Денис Горелов
- 20.09.2018
- 1С-Битрикс
- Урок: 2
- Просмотров: 0
(УРОК-1) Введение. Что такое компоненты?
Первый урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». В данном уроке познакомимся с компонентами и их видами. Рассмотрим принцип работы системы 1С-Битрикс, какие задачи компоненты выполняют в ней. Какие виды компонентов …
- Денис Горелов
- 18.09.2018
- 1С-Битрикс
- Урок: 1
- Просмотров: 0
Вывод СВОЙСТВ из инфоблока в 1С-БИТРИКС
Данный выпуск посвящен CMS 1С Битрикс. В нем разберем, как добавлять свои свойства к инфоблоку, и выводить их на страницу сайта. Практически вся информация отображаемая на сайте представлена при помощи компонентов, с помощью их мы выводим информацию .
- Денис Горелов
- 03.08.2018
- 1С-Битрикс
- Просмотров: 0
FORM — Анимация на transform (урок #7)
Это заключительный седьмой урок из серии уроков по форме. В нем закрепляем работу с псевдоэлементами, которые проходили в предыдущих уроках и на базе их, реализуем эффект анимированной обводки у социальных иконок.
- Денис Горелов
- 16.06.2018
- CSS и CSS3
- Урок: 7
FORM — анимация ЧЕКБОКСА (урок #6)
Это шестой урок по форме. В нем разбираем эффект анимирующего чекбокса, который сделаем при помощи одного псевдо элемента ::before и далее при помощи transform придадим ему динамику по нажатию на текст.
- Денис Горелов
- 25.05.2018
- CSS и CSS3
- Урок: 6
- Просмотров: 0
Вертикальное раскрывающееся меню при наведении с помощью CSS и HTML
В этой статье объясняется, как создать вертикальное раскрывающееся меню с помощью CSS и HTML.
Вы часто видите сайты, содержащие строку меню, которая раскрывается при наведении курсора и выглядит действительно великолепно, но обычно это горизонтальные раскрывающиеся меню. Эта статья поможет вам создать вертикальное раскрывающееся меню.
Вывод будет примерно таким:
Теперь мы увидим процедуру создания такого выпадающего меню.
Шаг 1
Прежде всего, добавьте таблицу стилей и форму или HTML-страницу.
Затем на HTML-странице или в веб-форме .NET добавьте «Div» и назовите его «divMenu».
После создания Div нам нужно добавить список элементов и еще один список в этих элементах, поэтому окончательный код будет примерно таким:
Шаг 2
Прямо сейчас ваш код представляет собой не что иное, как этот:
Итак, чтобы он выглядел хорошо и интересно, мы внесем изменения в таблицу стилей, которую мы добавили ранее.
Добавьте этот код в свою таблицу стилей:
- #divMenu, ul, li, li li {
- маржа: 0;
- заполнение: 0;
- }
- #divMenu {
- ширина: 150 пикселей;
- высота: 27 пикселей;
- }
- #divMenu ul
- {
- line-height: 25px;
- }
- #divMenu li {
- стиль списка: нет;
- должность: родственник;
- фон: #641b1b;
- }
- #divMenu li li {
- стиль-списка: нет;
- должность: родственник;
- фон: #641b1b;
- слева: 148 пикселей;
- верх: -27 пикселей;
- }
- #divMenu ul li a {
- ширина: 148 пикселей;
- высота: 25 пикселей;
- отображение: блок;
- text-decoration: none;
- text-align: center;
- семейство шрифтов: Georgia,’Times New Roman’, serif;
- color:#ffffff;
- border:1px solid #eee;
- }
- #divMenu ul ul {
- позиция: абсолютная;
- видимость: скрыта;
- верх: 27 пикселей;
- }
- #divMenu ul li:hover ul {
- видимость: видимый;
- }
- #divMenu li:hover {
- цвет фона: #945c7d;
- }
- #divMenu ul li:hover ul li a:hover {
- цвет фона: #945c7d;
- }
- #divMenu a:hover {
- начертание шрифта: жирный;
- }
Здесь я использовал идентификатор
Теперь все изменится, и ваш результат будет совершенно другим и интересным.
Вывод
html — изменить вертикальное раскрывающееся меню CSS на горизонтальное
спросил
Изменено 8 лет, 4 месяца назад
Просмотрено 2к раз
Я загрузил раскрывающееся меню CSS с веб-сайта (purecss.menus.com). Сначала это было вертикальное меню, и когда вы наводите курсор, подменю появляются справа от меню. Я изменил главное меню, чтобы оно отображалось горизонтально. Но я не уверен, какую часть кода CSS изменить, чтобы подменю отображалось вертикально под пунктом меню. Я попытался изменить ширину, положение и атрибуты отображения ul ul , ul li ul и т.