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

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

<link rel="stylesheet" href="examples.css" type="text/css">

<style type="text/css">

#set, #set ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  border: 1px solid #669999; 
  background: #CCFFFF; 
  float: left; 
  width: 45%;
}
#set li {
  float: left; 
  position: relative; 
  background: #CCFFFF; 
  background: #CCFFFF; 
  border: 1px solid #FFF; 
  border-right-color: #527337; 
  border-bottom-color: #527337; 
}

#set a {
  color:#660033; 
  text-indent:5px; 
  display: block; 
  width: 125px; 
  padding: 4px 10px; 
  background: url(dot.png) repeat-y right; 

}

#set a:hover {
  color: #FFFFCC; 
  background: #009999; 

}
#set li:hover, 
#set li.jshover {
  background: #009999; 

}

#set li ul {
  display: none; 
  position: absolute; 
  background: url(fone-tr.png); 
  padding: 8px 0; 
  width: 150px; 

}
#set li li a {
  width: 150px; 
  background: none; 

}
#set li:hover ul, 
#set li.jshover ul {
  display: block; 

}

#set li:hover li ul, 
#set li.jshover li ul {
  display: none; 
  width: 150px; 
  top: -9px; 
  left: 150px; 
  lef\t: 170px; 

}
#set li:hover li:hover ul, 
#set li.jshover li.jshover ul {
  display: block; 
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//>
<!--jsHover = function() {
var hEls = document.getElementById("nav").
getElementsByTagName("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.
replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf
("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>

<div id="container">
<ul id="set">
<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></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>

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

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

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

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