Как сделать выпадающее меню в html вертикальное: Вертикальное меню на CSS с выпадающим подменю по клику на плюсик

Плавно открывающееся меню с помощью CSS. Вертикальное выпадающее меню на css: как его сделать

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

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

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

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

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

#nav{ height: 70px; } #nav ul{ list-style: none; }

Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

#nav > ul > li{ float: left; width: 180px; position: relative; }

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

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

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

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

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

#nav li .second{ display: none; position: absolute; top: 100%; }

Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

Теперь мы видим на веб-странице только основное меню, что нам и нужно.

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

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

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

#nav li li{ width: 180px; }

Все, проблема решена:

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

Переделываем меню в вертикальное

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

Михаил сб, 09/20/2014 — 12:28

Что-то мой комментарий не виден — дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul.nav li:hover ul {display: block;}»
Подскажите, в чем дело?

Есть пожедания по изложению материала:

Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности

Хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

В частности, неясно, зачем нужна строка «

Видеоурок 1. Выпадающее меню для сайта с помощь html и css на WordPress

Не так давно, на одном из рабочих сайтов, мне нужно было сделать выпадающее меню. Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону. Но после того, как я обнаружил что на многих блогах код дают не правильный — не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню — рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.

html код выпадающего меню — скилет

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

<ul>
        <li><a href="/">Подменю 1</a>
            <ul>
                <li><a href="/" >Пункт подменю 1</a></li>
                <li><a href="/">Пункт подменю 2</a></li>
                <li><a href="/">Пункт подменю 3</a></li>
            </ul>
        </li>

<li><a href="/">Подменю 2</a>
                <ul>
                    <li><a href="/">Пункт подменю 1</a></li>
                    <li><a href="/">Пункт подменю 2</a></li>
                    <li><a href="/">Пункт подменю 3</a></li>
                </ul>
            </li>
</ul>

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

Вот такое меню можно сделать моим способом…

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

#mymenu {
    float: left;
    width: 100%;
    margin: 20px 10px;
    list-style: none;
}

#mymenu li {
    float: left;
    width: auto;
    padding: 0 10px;
    font-size: 18px;
}

#mymenu li ul {
    display: none;
    width: 200px;
}

#mymenu li:hover ul {
    display: block;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mymenu li ul li {
    float: left;
    width: 200px;
    padding: 5px 0;
    font-size: 14px;
}

 CSS код вертикального выпадающего меню

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

#mymenu {
	float: left;
	width: 150px;
	height: auto;
	margin: 20px 10px;
	list-style: none;
}

#mymenu li {
	display: block !important;
	width: auto;
	padding: 0 10px;
	font-size: 18px;
}

#mymenu li ul {
	display: none;
	width: 200px;
}

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0 0px;
	padding: 0;
}

#mymenu li ul li {
	float: left;
	width: 200px;
	padding: 5px 0;
	font-size: 14px;
}

В данном случае меню выпадает вертикально вниз. Но если в CSS стилях заменить вот этот код, подменю выпадает вправо:

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0px 100px;
	position: absolute;
	padding: 0;
}

Выпадающее меню для сайта

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

Если у вас код откажется работать — пишите в комментарии, подправлю вам лично 🙂

Удачной работы! 😉

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

   
• Главная

   

• Новости

   

• Контакты

   

• О сайте

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором “menu”.

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

• Главная
• Новости
• Контакты
• О сайте

Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель. 

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

Теперь элементы списка будут расположены по горизонтали:

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

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

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

JavaScript, jQuery и Ajax все сразу в одном видеокурсе!

Выравнять меню по центру можно так:

Результат:

Либо так:

Результат:

Горизонтальное меню с пунктами одинаковой ширины

JavaScript, jQuery и Ajax все сразу в одном видеокурсе!

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

Результат:

Или так:

Результат:

Если добавить немного трансформации:

то получим меню со скошенными углами:

Источник: http://webcodius.ru/recepty-dlya-sajta/kak-razmestit-elementy-spiska-gorizontalno-ili-gorizontalnoe-menyu-s-pomoshhyu-css.html

Видеоурок 1. Выпадающее меню с помощь html и css

Не так давно, на одном из рабочих сайтов, мне нужно было сделать выпадающее меню.

Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону.

Но после того, как я обнаружил что на многих блогах код дают не правильный – не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню – рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.

html код выпадающего меню – скилет

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

        
• Подменю 1             
                  
  • Пункт подменю 1

                  

  • Пункт подменю 2

                  

  • Пункт подменю 3

              

          

• Подменю 2                 
                      
  • Пункт подменю 1

                      

  • Пункт подменю 2

                      

  • Пункт подменю 3

                  

              

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

Вот такое меню можно сделать моим способом…

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

#mymenu {     float: left;     width: 100%;     margin: 20px 10px;     list-style: none; } #mymenu li {     float: left;     width: auto;     padding: 0 10px;     font-size: 18px; } #mymenu li ul {     display: none;     width: 200px; } #mymenu li:hover ul {     display: block;     position: absolute;     list-style: none;     margin: 0;     padding: 0; } #mymenu li ul li {     float: left;     width: 200px;     padding: 5px 0;     font-size: 14px; }

 CSS код вертикального выпадающего меню

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

#mymenu { float: left; width: 150px; height: auto; margin: 20px 10px; list-style: none; } #mymenu li { display: block !important; width: auto; padding: 0 10px; font-size: 18px; } #mymenu li ul { display: none; width: 200px; } #mymenu li:hover ul { display: block; list-style: none; margin: 0 0 0 0px; padding: 0; } #mymenu li ul li { float: left; width: 200px; padding: 5px 0; font-size: 14px; }

В данном случае меню выпадает вертикально вниз. Но если в CSS стилях заменить вот этот код, подменю выпадает вправо:

#mymenu li:hover ul { display: block; list-style: none; margin: 0 0 0px 100px; position: absolute; padding: 0; }

Выпадающее меню для сайта

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

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

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

Если у вас код откажется работать – пишите в комментарии, подправлю вам лично 🙂

Удачной работы! 😉

Участвуй в развитии блога и сообщества

Подписывайтесь и получайте полезные статьи на почту!

Источник: http://www.onwordpress.ru/menu-html-css.html

Горизонтальное выпадающее меню на чистом css!

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

Далее создаем файл стилей с самым простым reset для обнуления отступов (об этом подробно я писал здесь) и подключаем его (файл стилей) к нашему недавно созданному  файлу с  html структурой используя  тег link :

Так как мой файл стилей находится в той же папке что и index.html и назвал я его style.css в атрибутне href у меня следующий путь к файлу:   href=»style.css» .

В итоге вы должны получить:

1. Два файла, один с расширением html, а второй с расширением css, у меня они называются  index.html и style.css.

2. В файле index.html должна быть прописана структура с подключением таблицы стилей:

3  В файле style.css должен быть прописан простой ресет код для обнуления стилей:

re

И не забудьте проверить подключилась ли к файлу таблица стилей (правильно ли прописан путь к файлу стилей), обычно я для этого для тега body прописываю какой либо темный фон и смотрю изменения на странице.

Ну что же,  вроде с подготовительными работами разобрались,  приступаем непосредственно к создании html структуры нашего меню.

Структура горизонтального выпадающего меню

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

        
• Пункт меню 1

        

• Пункт меню 2

        

• Пункт меню 3

        

• Пункт меню 4

        

• Пункт меню 5

    

Как видите помимо обычного списка я еще добавил в каждый пункт ссылку, а также присвоил для нашего списка класс .navigation .

Пока что в браузере это выглядит таким образом.

Никаких стилей, да еще и отступов совсем нет, так как мы их обнулили для всех элементов используя reset.

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

        
• Пункт меню 1

        

• Пункт меню 2

        

•             Пункт меню 3             
                  
  • подпункт меню 1

                  

  • подпункт меню 2

                  

  • подпункт меню 3

                  

  • подпункт меню 4

                  

  • подпункт меню 5

              

          

        

• Пункт меню 4

        

• Пункт меню 5

    

Здесь, как вы наверняка заметили, для вложенного ul элемента я добавил класс .sub-menu. Забегая на перед скажу, что от него можно было бы отказаться, но я обычно добавляю такого рода класс, чтобы в будущем  легче  было читать css стили.

Если мы посмотрим в браузере на наш список то увидим следующее:

Все стало еще хуже сплошной список, где сходу не скажешь есть ли здесь вложенность или нет, ну если мы на время за комментируем reset то увидим картину получше:

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

Пишем стили для выпадающего меню

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

Шаг 1. Убираем маркеры в списка.

ul{     list-style:none; }

Подробно я уже рассказывал о данном свойстве в вышеупомянутой статье, поэтому идем дальше.

Шаг 2. Стилизуем .navigation.

ul.navigation{     width:960px;     margin:30px auto;     background:#5389a5; }

Здесь мы задаем для нашего списка ширину, цвет и располагаем его по центру страницы.

Шаг 3. Выравниваем пункты списка по левому краю.

.navigation li{     float:left; }

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

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

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

Шаг 4. Добавляем класс .clearfix для очистки потока.

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

.clearfix:after{     content:»;     display:block;     clear:both; }

В нашем случаи класс .clearfix нужно добавить к блоку с классом .navigation, вот такая у нас получится итоговая структура:

        
• Пункт меню 1

        

• Пункт меню 2

        

•             Пункт меню 3             
                  
  • подпункт меню 1

                  

  • подпункт меню 2

                  

  • подпункт меню 3

                  

  • подпункт меню 4

                  

  • подпункт меню 5

              

          

        

• Пункт меню 4

        

• Пункт меню 5

    

Шаг 5. Стилизуем  ссылки.

.navigation li a{     display:block;     font:16px/1.2em Tahoma, sans-serif;     color:#fff;     padding:10px 15px;     text-decoration:none; }

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

Пока все выглядит так себе, ну мы же не закончили

Источник: https://webmox.ru/gorizontalnoe-vypadayushhee-menyu-na-chistom-css.html

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

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

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

Но затем вы надеваете шляпу своего владельца сайта и — БАМ — вы совершенно другой человек! Все то, что вы раздражали на других сайтах, теперь гордо живет на ваших!

Я не знаю причину этого специфического поведения, но я знаю, что мы должны вылечить это.

Итак, сегодня я хотел бы поговорить об одной из тех вещей, которые вас раздражают на других сайтах, но все же есть на ваших:

Содержание | Быстрая навигация

<!DOCTYPE html PUBLIC "-//W3C/DTD//XTHML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtm1" xml:lang="en" lang="ru">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Услуги</a>
                <ul>
                    <li><a href="#">Все виды оценки</a></li>
                    <li><a href="#">Автоэкспертиза</a></li>
                    <li><a href="#">Автострахование</a></li>
                    <li><a href="#">Юридические услуги</a></li>
                </ul><!--end sub_nav-->
            </li>
            <li><a href="#">Тарифы</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Контакты</a></li>
        </ul><!--end main_nav-->
</body>
</html>

#main_nav {
            position: relative;
            top: 15px;
            margin-top: 14px;
            margin-left: 280px;
            }
        #main_nav li{
            display: inline;
            padding: 0 8px;
            border-left: 1px dotted #8b6619;
            position: relative;
            z-index: 2;
            }
        #main_nav li:first-child, #main_nav ul li {
            border-left: none;
            }
        #main_nav ul {
            display: none;
            position: absolute;
            top: 19px;
            left: 0;
            z-index: 1;
            width: 155px;
            }
        #main_nav li a, #main_nav li ul li a{
            color: #8b6619;
            font-family: "Times New Roman", serif;
            font-size: 0.9em;
            font-weight: bold;
            text-decoration: none;
            outline: none;
            padding-bottom: 17px;
            }
        #main_nav li a:hover, 
        #main_nav li ul a:hover {
            color: black;
            }
        /*--------------Подменю--------------*/
            #main_nav li:hover ul {
                display: block;
                }

<title>Вертикальное выпадающее меню на CSS</title>
<script type="text/javascript" src="cssmenu.js"></script>
 	<link rel="stylesheet" type="text/css" href="style.css">
 
<ul>
 
 	<li><a href="#">Главная страница</a></li>
 
 
 	<li><a href="#">Создание сайтов</a>
 
<ul>
 
 	<li><a href="#">Дизайн сайтов</a></li>
 
 
 	<li><a href="#">Вёрстка сайтов</a></li>
 
 
 	<li><a href="#">Оптимизация сайтов</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">Продвижение сайтов</a>
 
<ul>
 
 	<li><a href="#">SEO продвижение</a></li>
 
 
 	<li><a href="#">SMO продвижение</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">SEO биржи</a></li>
 
 
 	<li><a href="#">SEO софт</a></li>
 
</ul>

<div>
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

  нав ул {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
}
навигация
ul {
  маржа сверху: 4 пикселя;
}
nav ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
nav ul li: hover {
  цвет фона: # E88B2E;
}
навигацияя не знаю {
  цвет: желтый;
}
ссылка {
  цвет: зеленый;
}
а: посетил {
  цвет: зеленый;
}
a: hover {
  цвет: светло-зеленый;
}
ul li ul {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
  дисплей: нет;
}
ul li ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
ссылка {
  текстовое оформление: нет;
}
nav ul li: hover ul {
  / * При наведении указателя мыши на элемент списка отображаем UL, вложенный в него.* /
  дисплей: блок;
}
nav ul ul {
  / * Удаляем элемент из потока документов * /
  позиция: абсолютная;
  / * Позиция относительно родительского объекта & lt; li & gt; * /
  слева: 210 пикселей;
  верх: 0;
  верхняя граница: 1px solid # e9e9e9;
  дисплей: нет;
}
nav ul ul li {
  ширина: 200 пикселей;
  фон: # f1f1f1;
  граница: 1px solid # e9e9e9;
  граница-верх: 0;
}
nav ul ul li a {
  цвет: # a8a8a8;
  размер шрифта: 12 пикселей;
  текст-преобразование: нет;
}
nav ul ul li a: hover {
  цвет: # 929292;
}  

  нав ул {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
}
навигация
ul {
  маржа сверху: 4 пикселя;
}
nav ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
nav ul li: hover {
  цвет фона: # E88B2E;
}
nav.idk {
  цвет: желтый;
}
ссылка {
  цвет: зеленый;
}
а: посетил {
  цвет: зеленый;
}
a: hover {
  цвет: светло-зеленый;
}
ul li ul {
  стиль списка: нет;
  маржа: 0;
  отступ: 0 пикселей;
  ширина: 200 пикселей;
  высота: авто;
  дисплей: нет;
}
ul li ul li {
  border-top: 2px solid # 000000;
  цвет фона: белый;
  ширина: 10em;
  черный цвет;
  ширина: 200 пикселей;
  высота: авто;
  отступ: 5px 0px;
  размер шрифта: 120%;
}
ссылка {
  текстовое оформление: нет;
}
nav ul li: hover ul {
  / * При наведении указателя мыши на элемент списка отображаем UL, вложенный в него.* /
  дисплей: блок;
}
nav ul ul {
  / * Удаляем элемент из потока документов * /
  позиция: абсолютная;
  / * Позиция относительно родительского объекта & lt; li & gt; * /
  маржа слева: 200 пикселей;
  верх: 0;
  верхняя граница: 1px solid # e9e9e9;
  дисплей: нет;
}
nav ul ul li {
  ширина: 200 пикселей;
  фон: # f1f1f1;
  граница: 1px solid # e9e9e9;
  граница-верх: 0;
}
nav ul ul li a {
  цвет: # a8a8a8;
  размер шрифта: 12 пикселей;
  текст-преобразование: нет;
}
nav ul ul li a: hover {
  цвет: # 929292;
}