Горизонтальное выпадающее меню для Blogger | Красивые примеры

 

 

Из этого урока вы узнаете как сделать горизонтальное выпадающее меню СSS/HTML для blogger (blogspot), как настроить и установить меню в блог без знаний css и html. Установка очень простая и быстрая, нет нужды делать изменения в шаблоне темы.

 

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

 

 

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

 

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

 

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

 

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

 

Признание в любви

1. Признание в любви мужу
2. Признание в любви жене

• 2.1 Признание до слез
• 2.2 Признание в стихах
• 2.3 Признание любимой жене
• 2.4 Признание жене своими словами

3. Признание в любви парню
4. Признание в любви девушке
5. Признание в любви женщине

• 5.1 Смс признание
• 5.2 Стихи признание
• 5.3 Нежные признания

6. Признание в любви

 

Как установить код меню в блог

 

Установка, аналогична установке горизонтального меню в блог. Админка > Дизайн > Добавить гаджет > HTML/JavaScript.

 

HTML/JavaScript Добавляйте в свой блог приложения или другие коды независимых производителей.

 

В поле вставляем код и сохраняем. Коды состоят из стилей Css и списка Html.

 

Важно знать! Когда вы добавляете любой элемент в блог, разберите код на запчасти, особенно обратите внимание на ссылки  <a href="URL">...</a>. Многие элементы для сайта фоном берутся картинки, откройте ссылку в новом окне браузера, посмотрите относиться картинка или ссылка к коду.

 

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

 

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

 

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

 

Вот к примеру разберем такой код:

 

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->

<!-- customize your menus Links -->

 

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

 

• Для начала разбейте код на строки, разнесите стили сss в простом текстовом редакторе, как в моих примерах, сделайте код красивым, что бы понять весь код.

 

• Теперь обратите внимание на стили. Стили css задаются открывающим тегом <style> и закрывающим тегом </style>. Все! А что мы видим в этом коде?

 

</style><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->

<!-- customize your menus Links -->

 

Все что идет после закрывающего тега лишнее. После стилей начинается список html в теге <div>... </div>

 

• Далее, просматриваем ссылки.

 

Картинки в коде меню

 

В этом меню нет изображений, только html и css. Откройте в браузере картинку - https://bitly.com/24workpng1. Скажите зачем в выпадающем меню это крохотная звездочка? И я не знаю. Потому что в принципе в этом коде должна отсутствовать любая картинка.

 

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

 

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

 

Но как бы не было - Предупрежден, значит, вооружен.

 

Написать эти строчки меня побудил печальный случай в начале ведения блога на blogger. Вспоминать его до сих пор не приятно, сутки плакала от безвыходности и тоски, но не сдалась:-)

 

В бурженете я скачала скрипт постраничной навигации, написала статью, но через несколько дней когда в поисковике набрала адрес своего блога, я была шокирована. И именно этот адрес и ссылки в коде я не забуду никогда http://24work.blogspot.com/!!! Код я скачала именно на этом сайте.

 

В поисковике Яндекса рядышком с названием моего сайта в сниппете, была надпись: «Сайт может угрожать безопасности вашего компьютера или мобильного устройства». Яндекс регулярно проверяет индексируемые сайты на вредоносные коды и делает предупреждения, для посетителей и для вебмастеров. Если через несколько дней не удалить плохие коды, сайт попадет под фильтр и исчезнет из поиска.

 

Для себя с тех пор я взяла за правило, все что добавляю на сайт не запоминаю, а записываю. На компьютере создала файл "Что я добавила на сайт", добавляю туда записи и указываю число.

 

Все это надо было написать в отдельной статье, но в коде для примера присутствует ссылка на сайт, который так много принес мне боли и досады!

 

 

Настройки: изменить цвет фона, размер шрифта, цвет ссылок

 

 

background-color:#C71A1A - цвет фона
a{color:#FFFFFF - цвет текста меню
a:hover{color:#a0a0a0} -цвет текста ссылок при наведении.

 

Свойство background-color в css определяет цвет фона любого элемента на сайте.

Тег <a> в html  применяется для создания гипрессылки (ссылки).
Атрибут color указывает на цвет элемента.

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

 

Теперь нам нужно найти теги в коде. Где бы вы не настраивали и изменяли код, хотя лучше всего делать это в html редакторе, будь то админка, редактор страниц и сообщений, WordPad и даже на чужом сайте можно открыть окно поиска. Нажимаем Ctrl+ F, вводим то что хотим найти, нужный код или текст выделится другим цветом.

 

Копируем код цвета элемента в виде #FFFFFF, выделяем, нажимаем Найти в Яндекс или Найти в Google. Смотрим какой цвет и изменяем на свой.

 

Как посмотреть исходный код элемента на сайте

 

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

 

Давайте посмотрим исходный код моей кнопочки Посмотреть пример.

 

 

 

Обратите внимание в каком виде задан цвет в этом коде. Цвет элемента может записываться в разных форматах.

 

Изменяем названия страниц, рубрик в меню и подменю, вместо # пишем адреса пунктов меню.

 

Горизонтальное выпадающее меню СSS/HTML для blogger (blogspot) | Примеры

 

 

Пример 1

 

<style type="text/css">
@charset 'UTF-8';
#navigation{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}
#navigation > ul{margin-top:6px !important}
#navigation ul{background:#ffffff;background:-webkit-linear-gradient(#ffffff 0%,#e2e2e2 80%,#ffffff 100%);background:linear-gradient(#ffffff 0%,#e2e2e2 80% #ffffff 100%);border-top:1px solid #e20b0b;-webkit-box-shadow:inset 0 1px 0 #ffffff,0 1px 0 #e20b0b,0 2px 0 #e20b0b,0 8px 0 #e20b0b,0 9px 0 #e20b0b,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #ffffff,0 1px 0 #e20b0b,0 2px 0 #e20b0b,0 8px 0 #e20b0b,0 9px 0 #e20b0b,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #ffffff,0 1px 0#e20b0b,0 2px 0 #e20b0b ,0 8px 0 #e20b0b,0 9px 0 #e20b0b,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}
#navigation ul ul{border-top:6px solid #e20b0b;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#navigation ul ul a{line-height:43px}
#navigation ul ul ul{left:100%;top:0}
#navigation li{float:left;padding:0 8px}
#navigation li a{color: #000000;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}
#navigation li a:hover{color:#757575;text-decoration:none}
#navigation li ul{background:#ffffff;border-left:2px solid #e20b0b;border-right:2px solid #e20b0b;border-bottom:2px solid #e20b0b;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}
#navigation li:hover > ul{display:block}
#navigation li li{display:block;float:none;padding:0;position:relative;width:225px}
#navigation li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}
#navigation li ul a:hover{background:#e20b0b;color:#000000;opacity:1.0;filter:alpha(opacity=100)}
#navigation p{clear:left}
#navigation .active > a{background:#e20b0b;-webkit-box-shadow:0 -4px 0 #e20b0b,0 -5px 0 #af2323 ,0 -6px 0 #e20b0b;-moz-box-shadow:0 -4px 0 #e20b0b,0 -5px 0 #af2323 ,0 -6px 0 #e20b0b;box-shadow:0 -4px 0 #e20b0b,0 -5px 0 #af2323 ,0 -6px 0 #e20b0b;color:#fff}
#navigation .active > a:hover{color:white}</style>

<div id="navigation">
<ul>
<li class="active"><a href="#">Главная</a></li>
<li class="sub-menu"><a href="#">Название</a>
<ul>
<li class="sub-menu"><a href="#">Название</a>
<ul>
<li><a href="#">Название</a></li>
<li class="latest"><a href="#">Название</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#">Название</a>
<ul>
<li><a href="">Название</a></li>
<li class="latest"><a href="#">Название</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Название</a></li>
<li class="latest"><a href="#">Название</a></li>
</ul>
</div>

 

 

Пример 2

 

 

<style type="text/css">
@charset 'UTF-8';
#navigation{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}
#navigation > ul{margin-top:6px !important}
#navigation ul{background:#ffffff;background:-webkit-linear-gradient(#ffffff 0%,#e2e2e2 80%,#ffffff 100%);background:linear-gradient(#ffffff 0%,#e2e2e2 80% #ffffff 100%);border-top:1px solid #50a142;-webkit-box-shadow:inset 0 1px 0 #ffffff,0 1px 0 #50a142,0 2px 0 #000000,0 8px 0 #50a142,0 9px 0 #50a142,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #ffffff,0 1px 0 #50a142,0 2px 0 #000000,0 8px 0 #50a142,0 9px 0 #50a142,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #ffffff,0 1px 0 #50a142,0 2px 0 #000000,0 8px 0 #50a142,0 9px 0 #50a142,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}
#navigation ul ul{border-top:6px solid #50a142;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#navigation ul ul a{line-height:43px}
#navigation ul ul ul{left:100%;top:0}
#navigation li{float:left;padding:0 8px}
#navigation li a{color: #000000;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}
#navigation li a:hover{color:#757575;text-decoration:none}
#navigation li ul{background:#ffffff;border-left:2px solid #50a142;border-right:2px solid #50a142;border-bottom:2px solid #50a142;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}
#navigation li:hover > ul{display:block}
#navigation li li{display:block;float:none;padding:0;position:relative;width:225px}
#navigation li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}
#navigation li ul a:hover{background: #50a142;color:#000000;opacity:1.0;filter:alpha(opacity=100)}
#navigation p{clear:left}
#navigation .active > a{background:#50a142;-webkit-box-shadow:0 -4px 0 #50a142,0 -5px 0 #000000 ,0 -6px 0 #50a142;-moz-box-shadow:0 -4px 0 #50a142,0 -5px 0 #000000 ,0 -6px 0 #50a142;box-shadow:0 -4px 0 #50a142,0 -5px 0 #000000 ,0 -6px 0 #50a142;color:#fff}
#navigation .active > a:hover{color:white}</style>

<div id="navigation">
<ul>
<li class="active"><a href="#"><span>Главная</span></a></li>
<li class="sub-menu"><a href="#"><span>Название</span></a>
<ul>
<li class="sub-menu"><a href="#"><span>Название</span></a>
<ul>
<li><a href="#"><span>Название</span></a></li>
<li class="latest"><a href="#"><span>Название</span></a></li>
</ul>
</li>
<li class="sub-menu"><a href="#"><span>Название</span></a>
<ul>
<li><a href="#"><span>Название</span></a></li>
<li class="latest"><a href="#"><span>Название</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Название</span></a></li>
<li class="latest"><a href="#"><span>Название</span></a></li>
</ul>
</div>

 

 

Пример 3

 

 

 

<style type="text/css">
#navigation ul{margin:0;padding:0}
#navigation li{margin:0;padding:0}
#navigation a{margin:0;padding:0}
#navigation ul{list-style:none}
#navigation a{text-decoration:none}
#navigation{height:70px;background-color:#C71A1A;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:auto}
#navigation > ul > li{float:left;margin-left:15px;position:relative}
#navigation > ul > li > a{color:#FFFFFF;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}
#navigation > ul > li > a:hover{color:#a0a0a0}
#navigation > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}
#navigation > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}
#navigation > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}
#navigation > ul ul > li{position:relative}
#navigation ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}
#navigation ul ul a:hover{background-color:#f0f0f0}
#navigation ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}
#navigation ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}
#navigation ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style>

<div id="navigation">
<ul>
<li class="active"><a href="#"><span>Главная</span></a></li>
<li class="sub-menu"><a href="#"><span>Название</span></a>
<ul>
<li class="sub-menu"><a href="#"><span>Пункт меню</span></a>
<ul>
<li><a href="#"><span>Подменю</span></a></li>
<li class="latest"><a href="#"><span>Пункт меню</span></a></li>
</ul>
</li>
<li class="sub-menu"><a href="#"><span>Пункт меню</span></a>
<ul>
<li><a href="#"><span>Подменю</span></a></li>
<li class="latest"><a href="#"><span>Подменю</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Название</span></a></li>
<li class="latest"><a href="#"><span>Подменю</span></a></li>
</ul>
</div>

 

 

Пример 4

 

 

 

<style>
#navigation { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#f60202; }
#navigation ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#navigation li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#navigation li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color: #f60202; }
#navigation li a:hover{ background-color:#222; }@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#navigation li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover > a { z-index: 4; }
#navigation li:hover ul.sub-menu { padding: 0; left: 0; top: 35px; width: 200px; }
#navigation ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#navigation ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#navigation ul li a:hover{ background:#111; }@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#navigation li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#navigation li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#navigation li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#navigation li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#navigation li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#navigation li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#navigation li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#navigation li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }
</style>

<ul id="navigation">
<li><a href="#">Главная</a></li>
<li><a href="#">Пункт 1</a>
<ul class="sub-menu">
<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</a></li>
</ul>
</li>
<li><a href="#">Пункт2</a>
<ul class="sub-menu">
<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>
<li><a href="#">Пункт3</a>
<ul class="sub-menu">
<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>
<li><a href="#">Пункт 4</a></li>
</ul>

 

 

Пример 5

 

 

<style>
#navigation { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#navigation ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#navigation li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#navigation li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#navigation li a:hover{ background-color:#222; }@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#navigation li > a:hover { -moz-animation-name: animation1; -

moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover > a { z-index: 4; }
#navigation li:hover ul.sub-menu { padding: 0; left: 0; top: 35px; width: 200px; }
#navigation ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#navigation ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#navigation ul li a:hover{ background:#111; }@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#navigation li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#navigation li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#navigation li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#navigation li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#navigation li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#navigation li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#navigation li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#navigation li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }
</style>

<ul id='navigation'>
<li><a href='#'>Главная</a></li>
<li><a href='#'>Меню 1</a>
<ul class='sub-menu'>
<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</a></li>
</ul>
</li>
<li><a href='#'>Меню 2</a>
<ul class='sub-menu'>
<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>
<li><a href='#'>Меню 3</a>
<ul class='sub-menu'>
<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>
<li><a href='#'>Меню 4</a></li>
</ul>

 

 

Пример 6

 

 

 

 

 

Пример 7

 

 

<style type="text/css">/*#c6c6c6*//* #a0a0a0 */
#navigation{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}
#navigation ul{background:#c6c6c6;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)}
#navigation li{float:left;padding:0 0 0 15px}
#navigation li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}
#navigation li a:hover{background:#a0a0a0;color:#FFF;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}
#navigation ul li:hover a{background:#a0a0a0;color:#FFF;text-decoration:none}
#navigation li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}
#navigation li:hover ul{display:block}
#navigation li li{display:block;float:none;margin:0;padding:0;width:200px;background:#c6c6c6;/*this is where the rounded corners for the dropdown disappears*/}
#navigation li:hover li a{background:none}
#navigation li ul a{display:block;height:50px;font-size:14px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}
#navigation li ul a:hover,
#navigation li ul li:hover a{border:0;color:#FFF;text-decoration:none;background:#a0a0a0;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}
</style>

<div id="navigation">
<ul>
<li class="active">
<a href="#"><span>Главная</span></a>
</li>
<li class="sub-menu">
<a href="#"><span>Меню</span></a>
<ul>
<li>
<a href="#"><span>Подменю</span></a>
</li>
<li>
<a href="#"><span>Подменю</span></a>
</li>
<li class="latest">
<a href="#"><span>Подменю</span></a>
</li>
</ul>
</li>
<li class="sub-menu">
<a href="#"><span>Меню</span></a>
<ul>
<li>
<a href="#"><span>Подменю</span></a>
</li>
<li class="latest">
<a href="#"><span>Подменю</span></a>
</li>
</ul>
</li>
<li class="latest">
<a href="#"><span>Подменю</span></a>
</li>
</ul>
</div>

 

 

Пример 8

 

 

<style type="text/css">
#navigation > ul,
#navigation > ul li,
#navigation > ul ul{list-style:none;margin:0;padding:0}
#navigation > ul{position:relative;z-index:597;float:left}
#navigation > ul li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;padding:10px}
#navigation > ul li.hover,
#navigation > ul li:hover{z-index:599;cursor:default}
#navigation > ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598}
# navigation> ul ul li{float:none}
#navigation > ul li:hover > ul{visibility:visible}
#navigation > ul a:link{text-decoration:none}
#navigation > ul a:active{color:#ffa500}
#navigation li{padding:0;color:#000}
#navigation{font-family:'Lato',sans-serif;width:auto;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background:#1b9bff;font-size:15px;-moz-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);box-shadow:inset 0 2px 2px rgba(255,255,255,0.3)}
#navigation > ul{padding:0 5px;-moz-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:block;float:none;zoom:1}
#navigation > ul:before{content:'';display:block}
#navigation > ul:after{content:'';display:table;clear:both}
#navigation > ul > li{padding:8px 5px}
#navigation > ul > li > a,
#navigation > ul > li > a:link,
#navigation > ul > li > a:visited{text-shadow:0 -1px 1px #004881;color:#fff;padding:7px 20px;display:block;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}
#navigation > ul > li > a:hover,
#navigation > ul > li:hover > a{background-color:#0082e7}
#navigation li li a{color:#8b8b8b;font-size:13px}
#navigation li li a:hover{color:#5c5c5c;border-color:#5c5c5c}
#navigation ul ul{margin:0 10px;padding:0 10px;float:none;background:#efefef;border:2px solid #1b9bff;border-top:none;right:0;left:0;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 2px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.2);box-shadow:0 2px 3px rgba(0,0,0,0.2)}
#navigation ul > li > ul > li{margin:0 10px 0 0;position:relative;padding:0;float:left}
#navigation ul > li > ul > li > a{padding:10px 20px 10px 10px;display:block}
#navigation ul > li > ul > li.sub-menu > a:before{content:'';position:absolute;top:18px;right:6px;border:5px solid transparent;border-top:5px solid #8b8b8b}
#navigation ul > li > ul > li.sub-menu > a:hover:before{border-top:5px solid #5c5c5c}
#navigation ul ul ul{width:200px;top:100%;border:2px solid #1b9bff}
#navigation ul ul ul li{float:none}</style>

<div id="navigation">
<ul>
<li class="active">
<a href="#"><span>Главная</span></a>
</li>
<li class="sub-menu">
<a href="#"><span>Меню</span></a>
<ul>
<li class="sub-menu">
<a href="#"><span>Подменю 1</span></a>
<ul>
<li><a href="#"><span>Подменю 2</span></a>
</li>
<li class="latest">
<a href="#"><span>Подменю 2</span></a>
</li>
</ul>
</li>
<li class="sub-menu">
<a href="#"><span>Подменю 1</span></a>
<ul>
<li><a href="#"><span>Подменю 2</span></a>
</li>
<li class="latest">
<a href="#"><span>Подменю 2</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Меню</span></a>
</li>
<li class="latest"><a href="#"><span>Меню</span></a>
</li>
</ul>
</div>

 

 

Пример 9

 

 

<style type="text/css">
#cssmenu{padding:0;margin:0;border:0;width:auto}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul{list-style:none;margin:0;padding:0}
#cssmenu ul{position:relative;z-index:597;float:left}
#cssmenu ul li{float:left;min-height:1px;line-height:1em;vertical-align:middle}
#cssmenu ul li.hover,
#cssmenu ul li:hover{position:relative;z-index:599;cursor:default}
#cssmenu ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}
#cssmenu ul ul li{float:none}
#cssmenu ul ul ul{top:1px;left:99%}
#cssmenu ul li:hover > ul{visibility:visible}
#cssmenu ul ul{top:1px;left:99%}
#cssmenu ul li{float:none}
#cssmenu ul ul{margin-top:1px}
#cssmenu ul ul li{font-weight:normal}/* Custom CSS Styles */
#cssmenu a{color:#FFFFFF;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:15px;padding:0 20px;text-align:center;text-decoration:none}
#cssmenu a:hover{background:#507525;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative;top:0}
#cssmenu ul{background:#5ea30e;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;list-style:none}
#cssmenu > ul{background:-moz-linear-gradient(top,#5ea30e 0%,#5ea30e 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ea30e),color-stop(100%,#5ea30e));background:-webkit-linear-gradient(top,#5ea30e 0%,#5ea30e 100%);background:-o-linear-gradient(top,#5ea30e 0%,#5ea30e 100%);background:-ms-linear-gradient(top,#5ea30e 0%,#5ea30e 100%);background:linear-gradient(#5ea30e 0%,#5ea30e 100%);box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);padding-top:5px;width:100%}
#cssmenu > ul > li{float:left;padding:0 10px;position:relative}
#cssmenu > ul > li:hover > a{background:#507525;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative}
#cssmenu > ul > li a{line-height:35px}
#cssmenu > ul > li a:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}
#cssmenu .has-sub:hover ul{display:block}
#cssmenu .has-sub a{display:block;position:relative}
#cssmenu .has-sub > a:after{content:'';display:block;width:10px;height:9px;position:absolute;right:5px;top:50%;margin-top:-5px;}
#cssmenu .has-sub ul{background:#507525;border:1px solid #507525;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;padding:10px 0;position:absolute;left:50%;top:34px;margin-left:-70px;width:140px;z-index:1}
#cssmenu .has-sub ul li:hover > a{background:#5ea30e;color:#000000;border-color:#5ea30e transparent transparent transparent}
#cssmenu .has-sub ul a{line-height:160%;padding:8px 0}
#cssmenu .has-sub .has-sub ul{background:#5ea30e;left:100%;top:0;margin-left:0}
#cssmenu .has-sub .has-sub ul a{background:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}
#cssmenu .has-sub .has-sub ul a:hover{background:#85c43c}
</style>

<div id="cssmenu">
<ul>
<li class="active">
<a href="https://demo-yablogger.blogspot.com/"><span>Главная</span></a>
</li>
<li class="has-sub">
<a href="https://demo-yablogger.blogspot.com/2017/09/vypadayushchee-menyu-primer-9.html"><span>Пример</span></a>
<ul>
<li class="has-sub">
<a href="#"><span>Подменю 1</span></a>
<ul>
<li>
<a href="#"><span>Подменю 2</span></a>
</li>
<li class="last">
<a href="#"><span>Подменю2</span></a>
</li>
</ul>
</li>
<li class="has-sub">
<a href="#"><span>Подменю 2</span></a>
<ul>
<li><a href="#"><span>Подменю 2</span></a>
</li>
<li class="last">
<a href="#"><span>Подменю 2</span></a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><span>Меню</span></a>
</li>
<li class="last"><a href="#"><span>Меню</span></a>
</li>
</ul>
</div>