Html меню горизонтальное выпадающее: Как сделать горизонтальное выпадающее меню для сайта на CSS

Содержание

html — Почему не работает выпадающее меню?

У меня есть горизонтальное меню, в котором при наведении на слово categories должно появляться выпадающее меню.

Мой код:

body {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
  margin: 0px;
}
header {
  width: 100%;
}
.navigation ul li {
  list-style: none;
  display: inline-block;
}
ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}
.navigation ul li a.special {
  color: #b59f5b;
}
ul li.categories:hover>ul.categ_sub {
  display: block;
}
.categ_sub a {
  display: block;
  text-decoration: none;
}
.categ_sub li a {
  display: none;
}
<div>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li><a href="">categories</a>
      <ul>
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Вопрос: почему при наведении на categories не появляется выпадающее меню?

Почему categories стало по уровню выше, чем все остальные пункты меню?

И как это исправить?

Заранее большое спасибо

  • html
  • css
  • menu
  • hover
body {
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
}
. navigation ul li {
  list-style: none;
  display: inline-block;
}
ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}
.navigation ul li a.special {
  color: #b59f5b;
}
ul li:hover ul.categ_sub {
  display: block;
}
.categ_sub {
  padding: 0;
  display: none;
  position: absolute;
  background: #ddd;
}
.categ_sub li {
  padding: 10px;
  display: block !important;
}
<div>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">features</a></li>
    <li><a href="">posttypes</a></li>
    <li><a href="#">pages</a></li>
    <li>
      <a href="">categories</a>
      <ul>
        <li><a href="#">sport</a></li>
        <li><a href="#">food</a></li>
        <li><a href="#">fashion</a></li>
      </ul>
    </li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

Вместо селектора >, который выбирает прямых детей у родителя, вероятно Вам был нужен +, который берет следующий к выбираемому элеменет:

body {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
}
header {
  width: 100%;
}
.
navigation > ul > li { display: inline-block; list-style: none; } ul li a { text-transform: uppercase; text-decoration: none; color: black; } .navigation ul li a.special { color: #b59f5b; } .categ_sub { position: absolute; display: none; } .categ_sub li { display: block; } .categories:hover + .categ_sub { display: block; }
<div>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li>
      <a href="">categories</a>
      <ul>
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Если нужно что бы «выпадающее меню» не пропадало, когда курсор перемещается на него (как в первом варианте), то достаточно перевесить hover на родителя:

body {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
}
header {
  width: 100%;
}
. navigation > ul > li {
  display: inline-block;
  list-style: none;
}
ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}
.navigation ul li a.special {
  color: #b59f5b;
}
.categ_sub {
  position: absolute;
  display: none;
}
.categ_sub li {
  display: block;
}
.wrapper:hover > .categ_sub {
  display: block;
}
<div>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">features</a></li>
    <li><a href="">posttypes</a></li>
    <li><a href="">pages</a></li>
    <li>
      <a href="">categories</a>
      <ul>
        <li><a href="">sport</a></li>
        <li><a href="">food</a></li>
        <li><a href="">fashion</a></li>
      </ul>
    </li>
    <li><a href="">contact</a></li>
  </ul>
</div>

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Горизонтальное выпадающее меню CSS: особенности, пошаговая инструкция

Меню – это тот элемент, с которым пользователь встречается при входе на сайт и видит его, перемещаясь по страницам. Главное меню располагается в шапке сайта, а дополнительное – в нижнем блоке страницы. Там содержится полезная или второстепенная информация, которая для удобства часто оформляется в виде меню. Зачастую на всех страницах сайта используется одинаковое оформление навигационного элемента.

Когда какие-то пункты содержат дополнительные разделы, создается несколько уровней. Это работает так: при наведении мыши на одну из секций появляется дополнительный список с подразделами. При разработке необходимо позаботиться, чтобы при просмотре страницы на маленьких экранах появлялось адаптивное меню вместо обычного.

HTML-разметка

Перед тем, как сверстать адаптивное выпадающее меню на CSS, нужно создать скелет. Задается с помощью языка разметки HTML и находится в файле с расширением .html. Начинается с <!DOCTYPE>, затем обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри документа задается тег head, где указывается мета-информация о сайте:

  • заголовок документа;
  • краткое описание;
  • кодировка;
  • файлы со стилями и скриптами.

После закрывающегося тега </head> следует тело документа, оформленное как <body>. Здесь находятся логические блоки сайта, они интерпретируются браузером и выводятся на экран в виде визуальных элементов.

Базовая разметка обычно состоит из тегов ul и li. Это семантически верное оформление, которое связано с тем, что при просмотре в браузерах, которые не поддерживают CSS, анализатор контента правильно опознает этот блок. Хотя использование стандартных div-ов также широко распространено.

Простая разметка меню без скрытых элементов и выпадающего меню на CSS выглядит таким образом:

<ul>

<li><a>Главная</a></li>

<li><a>История</a></li>

<li><a>О нас 3</a></li>

<li><a>Контакты 3</a></li>

</ul>

В теге <a> указываются ссылки на страницы, а во всех остальных – используемые селекторы.

Базовые стили

Следующим шагом создания выпадающего меню на HTML и CSS является создание каскадной таблицы стилей. Они хранятся в файле с расширением .css, где описывается внешний вид документа и различные визуальные эффекты. Здесь задаются цвета, шрифты, расположение блоков и других аспектов внешнего вида веб-страницы.

То, что здесь будет находиться, зависит исключительно от дизайна. Есть несколько основных моментов, которые следует разобрать. Поскольку создается меню, маркеры списка не должны отображаться. Они убираются с помощью атрибута list-style: none. Немаловажной частью является устранение подчеркивания ссылок. Для этого селекторы, которые отвечают за оформления тега <a>, должны содержать text-decoration: none.

Необходимо назначить действия при наведении мыши на кнопки. Для чего используется псевдокласс :hover? Используя его, пользователь видит, как меняется цвет пунктов или появляется выпадающий список меню на HTML CSS. Для скрытия некоторых элементов применяется display: none, а для появления – display: block или display: inline.

Горизонтальное размещение через float

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

Теперь нужно разместить все элементы в ряд. В этом случае будет использовано свойство float, отвечающее за обтекание. Сначала оно использовалось исключительно для того, чтобы управлять расположением текста относительно изображения. Таким образом, можно задать левостороннее или правостороннее выравнивание, отменить обтекание текста или назначить наследование значения родителя.

Горизонтальное размещение через inline-block

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

Когда нужно скрыть, используется display: none. Это понадобится для появления скрытых частей меню при наведении курсора мыши. Важно отметить, что блок не просто становится прозрачным, – видимые части сайта занимают его место.

Чтобы разместить дивы горизонтально друг за другом, необходимо использовать свойство inline или inline-block. Что касается последнего, его применение имеет больше преимуществ, ведь содержит свойства как строчного элемента, так и блочного.

Свойство display используется для div-ов и тегов li списка ul.

Таким образом, чтобы создать горизонтальное выпадающее меню на HTML CSS в файле стилей в селекторах li или div, указывается атрибут display со значением inline-block.

Создание выпадающих элементов

Выпадающие элементы изначально не видны на странице, они имеют свойство display: none. Позже none меняется на block или inline-block. Это происходит при клике на один из пунктов меню или во время наведения мыши. Для создания этого эффекта и связанных анимационных переходов, используется CSS.

Должно выглядеть примерно так:

#menu ul li {

position:absolute;

display: none;

}

#menu li:hover ul {

display:inline-block;

}

Следует обратить внимание на атрибут position, с помощью которого устанавливается позиционирование элемента. Блок div при заданном значении absolute отображается над другими блоками. А отсчет координат начинается от левого верхнего края родительского элемента. В данном случае родителем считается document. Это нужно изменить и сделать родителем #menu, задать position: relative. Теперь в #menu ul нужно указать координаты left и top, чтобы выпадающий список появлялся прямо под основным пунктом и не перекрывал его.

Если рядом находится несколько абсолютных блоков, надо использовать свойство z-index. При рассмотрении двух дивов с абсолютным позиционированием, когда один находится поверх другого, z-index первого должен иметь значение выше, чем у второго.

Адаптивность

Ни один сайт не может считаться хорошим, если он неправильно отображается на мобильных устройствах и планшетах. Смысл создания адаптивных страниц в том, чтобы изменить оформление при достижении определенного размера экрана. Для этого используется ключевое слово @media. В значениях указывается тип носителя, максимальный или минимальный размер экрана.

Чтобы работать с этим атрибутом, нужно задать начальную ширину блока на большом экране свойством max-width: 100%. Уменьшая экран, происходят изменения с блоком:

@media (min-width: 768px) {

.container-small {

//меняем ширину пунктов меню, выводим иконку гамбургера

}

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

Использование Bootstrap

С появлением фреймворка Bootstrap верстальщикам стало намного легче создавать адаптивные элементы и строить сайт. Он позволяет прототипировать идеи с помощью готовых компонентов и мощных плагинов. Для использования базовых возможностей нужно включить скомпилированные стили Bootstrap из CDN в head сайта. Должно выглядеть так:

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css» integrity=»sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4″ crossorigin=»anonymous»>

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

Теперь осталось добавить оформление, чтобы выглядело так, как того требует дизайн.

Другой способ создания адаптивных элементов – использование Grid системы. Ее отличие от Bootstrap в том, что можно указать любое количество колонок и сделать их разной ширины.

UberMenu

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

UberMenu – это горизонтальное меню с выпадающим списком HTML CSS, разработанное под движок WordPress. Его возможности:

  • адаптивность;
  • выпадающее меню;
  • поддержка сенсора;
  • работа из коробки;
  • гибкие настройки;
  • большой список анимационных переходов;
  • наличие фильтров сортировок;
  • автоматическая интеграция в любую тему WordPress.

Есть бесплатная и платная версия с полным функционалом стоимостью 19 долларов.

Удобство использования готовых плагинов для создания выпадающее меню на CSS в том, что все браузеры будут одинаково отображать содержимое веб-страницы. Есть одна неприятная особенность – UberMenu не умеет работать с браузером IE6. Но это не страшно, ведь сегодня среда распространения «Интернет Эксплорера» составляет менее 1%.

Max Mega Menu

«Макс Мега Меню» – это отличное решение для создания выпадающего меню на CSS. Оно поддерживает возможность расположения меню в хедере и футере. С ним легко работать, он поддерживает функцию drag-and-drop. Все, что необходимо сделать для размещения кнопок меню, – мышью перенести соответствующие элементы на выбранное место.

Можно назначить любые способы, чтобы появилось скрытое субменю: навести курсор мыши на элемент или кликнув по нему. Существует много анимационных эффектов: постепенное исчезание, появление, выезжание.

Этот плагин достаточно легкий, файл javascript весит менее 2 килобайт. При создании можно использовать встроенные шрифты, иконки. Если появляются проблемы с использованием, можно ознакомиться с соответствующими мануалами.

Для начала работы достаточно добавить его в список плагинов WP.

JQuery Accordion Menu Widget

Для создания выпадающее меню на CSS можно использовать плагин JQuery Accordion Menu Widget. Он доступен для скачивания из репозитория WordPress или с официального сайта. Работает с последними версиями CMS, совместим с другими плагинами.

С его помощью можно создавать вертикальное меню. Он поддерживает стандартные функции аналогичных инструментов, но есть особенные дополнения. Например, при развертывании субменю, если за 1 секунду не было совершено никаких действий, оно самостоятельно возвращается к исходному состоянию. Другая интересная функция представляет собой отключение родительских ссылок, когда активны дочерние. Это означает, что при появившемся подменю нет возможности нажать на пункты основного.

При самостоятельном создании меню пользователь встречал ситуацию, когда элементы сразу реагируют даже при случайном наведении мыши или щелчке. Чтобы избежать такого неудобства, встроена задержка hover delay. Другая полезная функция – управление скоростью появления и скрытия подменю.

Заключение

Важно создать выпадающее меню на CSS для простого и удобного взаимодействия между пользователем и интерфейсом веб-страницы. Чтобы решить задачу необходимо грамотно разработать дизайн, сверстать базовые элементы, оформить стили, доработать анимационные эффекты.

Можно воспользоваться готовыми вариантами, если не предусмотрены какие-то уникальные дизайнерские решения. Плагины легко подключаются к странице, их очень просто править в соответствии с требованиями.

Если есть смысл разрабатывать меню с нуля, конечно, это необходимо делать самостоятельно. При работе с фреймворками используются готовые компоненты, они сразу адаптивны. Отсутствие необходимости подстройки верстки под маленькие экраны сильно экономит время.

Как сделать горизонтальное выпадающее меню на сайте

28 января 2015 Антон Кулешов 7210 0

Продолжаем развивать тему навигации сайта и рассмотрим сегодня плавающие выпадающее горизонтальное меню.

Собственно, ничего нового, стандартный ненумерованный список, такой же, как мы использовали в одной из предыдущих статей (ссылка ниже), только усложняем его дополнительными вложенными списками для реализации выпадающих пунктов меню.

Реклама

Перед прочтением предлагаю рассмотреть — горизонтальное меню для сайта.

Перед тем как начнем копаться в коде, отмечу: данное выпадающее меню реализовано без использования jQuery и JavaScript, а только при помощи CSS и новых свойств CSS3. Помимо навигации снабдим наше меню еще и красивым раздвижным полем поиска.

Итак, структура HTML:

<div>
   <!-- #navigation -->
  <div>
       <!-- #menu -->
        <div>
         <!-- #nav-->
          <ul>
               <!-- Home Item -->
                <li>
                  <a href="#">Главная</a>
                   <!-- Level 1 -->
                  <ul>
                      <li><a href="#">Пункт №1</a></li>
                     <li><a href="#">Пункт №2</a></li>
                     <li><a href="#">Пункт №3</a></li>
                     <li><a href="#">Пункт №4</a></li>
                     <li><a href="#">Пункт №5</a></li>
                     <li><a href="#">Пункт №6 - Урв.
2</a> <!-- Level 2 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3 - Урв. 3</a> <!-- Level 3 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3 - Урв. 4</a> <!-- Level 4 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3</a></li> </ul> <!-- END Level 4 --> </li> </ul> <!-- END Level 3 --> </li> </ul> <!-- END Level 2 --> </li> </ul> <!-- END Level 1 --> </li> <!-- END Home Item --> <!-- Portfolio Item --> <li> <a href="#">Портфолио</a> <ul> <li><a href="#">Пункт №1</a></li> <li><a href="#">Пункт №2</a></li> <li><a href="#">Пункт №3</a></li> <li><a href="#">Пункт №4</a></li> <li><a href="#">Пункт №5</a></li> </ul> </li> <!-- END Portfolio Item --> <!-- Blog Item --> <li> <a href="#">Блог</a> <ul> <li><a href="#">Пункт №1</a></li> <li><a href="#">Пункт №2</a></li> <li><a href="#">Пункт №3</a></li> <li><a href="#">Пункт №4</a></li> </ul> </li> <!-- END Blog Item --> <li><a href="#">Сервисы</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Написать нам</a></li> </ul> <!-- END #nav --> <!-- Search Form --> <form action="#"> <input type="text" value="Поиск.
.." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> </form> <!-- END Search Form --> </div> <!-- END #menu --> </div> <!-- END #navigation --> </div>

В оберточный div помещаем заготовку нашего меню и форму для строки поиска. Первый уровень нашего меню представляет собой основные пункты меню, которые будут видны всегда, запихнуты они в элементы li списка ul с id=nav. Обворачиваем их в ссылки и начинаем наращивать нашу структуру – кладем списки ul без id в нужные элементы li корневого списка. Необходим еще один уровень вложенности? — Всегда, пожалуйста, выбираем li и засовываем туда еще один список. Количество уровней не ограничено, но не злоупотребляйте этим, иначе меню станет просто неюзабельным.

Далее подключаем уже готовый файл CSS:

<link href="style-menu.css" rel="stylesheet" type="text/css" />

Кто просто искал красивое плавающие выпадающее меню, на этом месте может остановиться и просто прикрепить файлы из архива себе на страницу. Для всех остальных же, скажу еще пару слов. Весь эффект данного меню заключается всего лишь в одной группе свойств transition:

#nav li a:hover,
#nav li ul li a:hover{
  transition-property: color, background;
 transition-duration: 0.5s, 0.5s; 
   transition-timing-function: linear, ease-out;
}
.searchfield:focus,
.searchfield:not(:focus){
  transition-property: width; 
    transition-duration: 0.5s, 0.5s; 
   transition-timing-function: linear, ease-out;
}
#menu_div:hover,
#navigation:hover,
#nav li ul a, 
#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover){
 transition-property: opacity;
   transition-duration: 0.5s, 0.5s;
    transition-timing-function: linear, ease-out;
}

В transition-property указываем необходимое нам свойство: цвет, прозрачность, длину, ширину, фон и т.п., transition-duration – задает скорость изменения указанного свойства, transition-timing-function – стиль изменения свойства – довольно интересный атрибут, но об этом расскажу как-нибудь в следующий раз.

#Меню

Горизонтальное выпадающее меню CSS [menu, html, css]


Я пытаюсь сделать горизонтальное выпадающее меню в CSS. Однако оно отображается вертикально:

Я хочу, чтобы два самых верхних пункта меню были горизонтальными. Что я могу сделать, кроме как сделать таблицу с одной строкой?

ul ul {
  display: none;
}
ul li:hover > ul {
  display: block;
}
<ul>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>

menu html css

person Edward Karak    schedule 24. 01.2015    source источник



Ответы (4)

arrow_upward
0
arrow_downward

Вы можете попробовать плавать элементы списка:

.root {
  overflow: hidden; /* clear float */
}
.root > li {
  float: left;
}
<ul>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
  <li>
    <a href="#">abc</a>
    <ul>
      <li><a href="#">abc</a></li>
      <li><a href="#">abc</a></li>
    </ul>
  </li>
</ul>

person Oriol    schedule 24. 01.2015


arrow_upward
0
arrow_downward

Вы можете добавить подменю класса/идентификатора с помощью .inline-menu{ display: inline; }

http://jsfiddle.net/dyaskur/fby9fan6/

person Muhammad Dyas Yaskur    schedule 24.01.2015


arrow_upward
0
arrow_downward

Суть вашего вопроса на самом деле такова: в чем разница между элементами inline и block? Это фундаментальный вопрос, который важен для понимания основ компоновки в CSS/HTML. На эту тему и некоторые компромиссы различных подходов есть хорошая статья:

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

По сути, ‹li› является тегом блочного уровня, что означает, что он отображается как собственный «блочный» элемент: получает макет (устанавливаемые размеры), по умолчанию занимает всю ширину родительского элемента и имеет принудительный разрыв после рендеринга. элемент (находится на линии сам с собой).

Таким образом, у нас остается несколько подходов к тому, чтобы ваши пункты меню располагались бок о бок:

  1. Используйте элементы встроенного уровня для пунктов меню.

  2. Используйте элементы блочного уровня и перемещайте их

  3. Используйте элементы уровня блока и стилизуйте их как встроенный блок

Все эти подходы подробно описаны в приведенной выше ссылке. Лично я предпочитаю использовать плавающие блочные элементы. У меня есть скрипка с черновым CSS, чтобы дать вам представление. Обратите внимание, что есть некоторые соображения по поводу того, как отображать ваши подменю. Вы заметите, что я реализовал их как display: block без плавающих элементов, потому что мы хотим, чтобы они располагались вертикально.

HTML

<ul>
  <li>
    <a href="#">foo</a>
    <ul>
      <li><a href="#">subfoo1</a></li>
      <li><a href="#">subfoo2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">bar</a>
    <ul>
      <li><a href="#">subbar1</a></li>
      <li><a href="#">subbar2</a></li>
    </ul>
  </li>
</ul>

CSS

ul. menu {
    list-style: none;
}
ul.menu > li{
    float: left;
    position: relative;
}
ul.menu li {
    background-color: #cccccc;
    padding: 5px 20px;
}
ul.menu > li + li {
    border-left: solid black 2px;
}
ul.menu li:hover > ul {
    display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
    color: black;
    text-decoration: none;
}
ul.submenu{
    display: none;
    list-style: none;
    position:absolute;
    left: 0;
    padding: 0;
}
ul.submenu li {
    float:none;
    display: block;
}
ul.submenu > li + li {
    border-top: solid black 1px;
}

person ChiralMichael    schedule 24.01.2015


arrow_upward
-1
arrow_downward

Вы можете просто удалить некоторые теги <li>:

<ul>
            <li>
                <a href="#">abc</a>
                <ul>
                    <a href="#">abc</a>
                    <a href="#">abc</a>
                </ul>
            </li>
            <li>
                <a href="#">abc</a>
                <ul>
                    <a href="#">abc</a>
                    <a href="#">abc</a>
                </ul>
            </li>
        </ul>

person Mikel Pascual    schedule 24. 01.2015

Создание простого меню для сайта на HTML и CSS

И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.

 

Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!