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

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

<style type="text/css">

ul#set-v,
ul#set-v li,
ul#set-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; 
  list-style: none;
}

ul#set-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#set-v li {
  float: left; 
  display: block !important; 
  display: inline; 
  position: relative;
}

ul#set-v a {
  border: 1px solid #FFF;
  border-right-color: #527337;
  border-bottom-color: #527337;
  padding: 0 6px;
  display: block;
  background: #FFCC99;
  color: #663333;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; 
}

ul#set-v a:hover,
ul#set-v li:hover a,
ul#set-v li.iehover a {
  background: #663333;
  color: #FFCCCC;
}

ul#set-v li:hover li a,
ul#set-v li.iehover li a {
  background: #FFCC99;
  color: #663333;
}

ul#set-v li:hover li a:hover,
ul#set-v li:hover li:hover a,
ul#set-v li.iehover li a:hover,
ul#set-v li.iehover li.iehover a {
  background: #663333;
  color: #FFCCCC;
}

ul#set-v li:hover li:hover li a,
ul#set-v li.iehover li.iehover li a {
  background: #FFCCCC;
  color: #663333;
}

ul#set-v li:hover li:hover li a:hover,
ul#set-v li:hover li:hover li:hover a,
ul#set-v li.iehover li.iehover li a:hover,
ul#set-v li.iehover li.iehover li.iehover a {
  background: #663333;
  color: #FFCCCC;
}

ul#set-v li:hover li:hover li:hover li a,
ul#set-v li.iehover li.iehover li.iehover li a {
  background: #663333;
  color: #FFCCCC;
}

ul#set-v li:hover li:hover li:hover li a:hover,
ul#set-v li.iehover li.iehover li.iehover li a:hover {
  background: #663333;
  color: #FFCCCC;
}

ul#set-v ul,
ul#set-v ul ul,
ul#set-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

ul#set-v li:hover ul ul,
ul#set-v li:hover ul ul ul,
ul#set-v li.iehover ul ul,
ul#set-v li.iehover ul ul ul {
  display: none;
}

ul#set-v li:hover ul,
ul#set-v ul li:hover ul,
ul#set-v ul ul li:hover ul,
ul#set-v li.iehover ul,
ul#set-v ul li.iehover ul,
ul#set-v ul ul li.iehover ul {
  display: block;
}

.pquote {
margin:0 auto;
width: 80%;clear:both;
background: #F7FAF5;
border:1px dotted #74A451;
padding: 11px; 9px; 11px; 9px;color:#405B2D;
font:12px verdana, arial, helvetica, sans-serif;
}
#counter {
display:none;
text-align:center;
}
h1,h2 {
color:#648B43;
}
</style>

<div>

<div id="ddsidemenubar">

<ul id="set-v"

<li><a href=" сылка на страницу сайта">работа на дому</a>

<ul>        
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>

<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>

</ul>

</li>    
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>

</li>

<li><a href=" сылка на страницу сайта">меню</a>

<ul>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>

<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>

</ul>

</li>    
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>

</li>

<li><a href=" ссылка на страницу сайта">меню </a>

<ul>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>

<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
</ul>

</li>      
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>

<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>

</li>

</ul>

</div></div>

Поделиться в соц. сетях

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

Похожие записи

  • Полный код простого вертикального меню. На этой странице размещен полный код простого вертикального меню для вашего сайта. Вы можете воспользоваться этой версией, а можете, при внесении некоторых настроек в коде, сделать […]
  • Полный код простого горизонтального меню. На этой странице размещен полный код для создания простого горизонтального меню для сайта. Вы можете внести некоторые изменения в код меню, создав свое меню, по своему […]
  • Полный код горизонтального выпадающего меню На этой странице размещен полный код горизонтального выпадающего меню для вашего сайта. Вы можете, по своему желанию, внеся некоторые изменения в код, создать свое меню. Все зависит от […]
  • Простое вертикальное меню для сайта Как я уже говорил в предыдущем разделе простое горизонтальное меню все меню имеют примерно одинаковую html-разметку. Поэтому, для создания простого вертикального меню мы будем использовать […]
  • Простое горизонтальное меню для сайта Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню […]
  • Горизонтальное выпадающее меню. В этом разделе мы с вами научимся, как с помощью CSS сделать красивое горизонтальное выпадающее меню. Преимущества такого меню, я думаю, очевидно, это экономия рабочего пространство на […]

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика