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

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню    Дата: 1-03-2011, 01:02
Простое готовое к использованию горизонтальное выпадающее CSS менюКак сделать простое, готовое к использованию, горизонтальное выпадающее CSS меню
Самая простая менюшка, проще некуда.
Расписывать тут нечего, просто смотрите как сделано, такую менюшку каждый веб мастер должен уметь делать без подсказок и подсматриваний.
<!--Выпадающее CSS меню от http://megaweb.su/-->
<div id="navigation_panel"> <a href="http://megaweb.su/" title="Главная страница"><img src="menu_home.gif" alt="Главная страница" width="30px" height="30px" /></a>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 1</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 2</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 3</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 4</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 5</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 6</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <ul class="gor_menu1">
  <li><a href="#"><span>Категория 7</span></a>
   <ul class="gor_menu">
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
    <li><a href="#">Подкатегория</a></li>
   </ul>
  </li>
 </ul>
 <br style="height:1px; clear:both;" />
</div>
<!--/Выпадающее CSS меню от http://megaweb.su/-->


Далее, в свою таблицу CSS вставляем этот код:

/*Выпадающее CSS меню от http://megaweb.su/*/
:-moz-any-link:focus {
outline: none;
}
a
{
                    text-decoration:none;
}
.gor_menu1
{
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu1 li
{
                    position:relative;/**/
                    display:block;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu
{
                    position:absolute;/**/
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    float: left;
                    width: 130px;
                    font: normal 11px verdana;
}
.gor_menu1 span
{
                    border: 1px solid #365799;
                    border-left:none;
                    background: #399;
                    color: #fff;
                    display: block;
                    text-decoration: none;
                    padding: 8px 8px 9px 8px;
                    text-align: center;
}
.gor_menu1 li .gor_menu
{
                    display: none;
}
.gor_menu li a
{
                    border:1px solid #365799;
                    border-top: none;
                    display: block;
                    color: #fff;
                    background: #399; /* IE6 Bug */
                    padding: 5px;
                    text-decoration: none;
                    text-align: left;
                    z-index: 1000;
}
.gor_menu li a:hover
{
                    color: #000;
                    background: #edf5f7;
}
.gor_menu1 li a:hover span
{
                    color: #000;
                    background: #edf5f7;
}
.gor_menu1:hover li .gor_menu
{
                    display: block;
}
#navigation_panel
{
                    width: 950px;
                    text-align:center;
                    margin:0 auto;
}
#navigation_panel a img
{
                    float:left;
                    border: 1px solid #365799;
}
/* Fix IE. Hide from IE Mac \*/
* html .gor_menu li
{
                    float: left;
}
* html .gor_menu li a
{
                    height: 1%;
}
/*Выпадающее CSS меню от http://megaweb.su/ End */


Вот и всё!
Смотреть пример простое готовое к использованию горизонтальное выпадающее CSS меню
Скачать готовый пример простое готовое к использованию горизонтальное выпадающее CSS меню
Версия для печати
  • 100
     Просмотров: 11 953      Комментариев: 0   

Понравилась новость Простое готовое к использованию горизонтальное выпадающее CSS меню на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

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

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Простое готовое к использованию горизонтальное выпадающее CSS меню из категории Меню навигации

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус