Горизонтальное выпадающее меню (kedem.ru)

Красивое горизонтальное CSS меню красного цвета как на сайте kedem.ru

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

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

Как будет выглядеть:

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

HTML код:

<div id="menu_center_block">
<ul id="menu_center">

   <li></li>
    <li><a href="/recipe/"><strong>Кулинарные рецепты</strong></a>

            <div class="col_1">
               <ul>
                   <li><a href="/recipe/bakery/blini/" title="Блины, рецепты блинов"><b>Блины</b></a></li>
                   <li><a href="/recipe/salads/" title="Салаты, рецепты салатов"><b>Салаты</b></a></li>
                   <li><a href="/recipe/snack/" title="Закуски, рецепты закусок">Закуски</a></li>
                   <li><a href="/recipe/soup/" title="Первые блюда, рецепты первых блюд, супы">Супы, первые блюда</a></li>
                   <li><a href="/recipe/dishes/" title="Вторые блюда, рецепты вторых блюд">Вторые блюда</a></li>
                   <li><a href="/recipe/bakery/" title="Выпечка, рецепты выпечки, торты, пироги, блины, булочки">Выпечка</a></li>
                   <li><a href="/recipe/dessert/" title="Десерты, рецепты десертов">Десерты</a></li>
                   <li><a href="/recipe/drink/" title="Напитки, рецепты напитков, коктейли">Напитки</a></li>
                   <li><a href="/recipe/sauces/" title="Соусы, рецепты соусов, майонезы, кетчупы">Соусы</a></li>
               </ul>

</div>
<div class="col_1">

               <ul style="width:250px;">
                   <li><a href="/recipe/valentinevsday/" title="Рецепты на 14 февраля"><b>Рецепты на 14 февраля</b></a></li>
                   <li><a href="/recipe/recepty-k-8-marta/" title="Рецепты к 8 марта"><b>Рецепты к 8 марта</b></a></li>
                   <li><a href="/recipe/post/" title="Постные рецепты">Постные рецепты</a></li>

<li><a href="/recipe/microwave/" title="Рецпты для микроволновки">Для микроволновки</a></li>
                   <li><a href="/recipe/steamer/" title="Рецпты для пароварки, рецепты блюд приготовленных на пару">Для пароварки</a></li>

                   <li><a href="/recipe/pasha/" title="К Пасхе пасхальные рецепты - РЕЦЕПТЫ К ПАСХЕ: крашенные яйца, рецепты кулича, рецепты пасхи, плетенки, выпечка к Пасхе.">Пасхальные рецепты</a></li>
                   <li><a href="/recipe/halloween/" title="Рецепты на Хэллоуин">Рецепты на Хэллоуин</a></li>
                   <li><a href="/recipe/zagotovki/" title="Заготовки - рецепты заготовки на зиму"><b>Заготовки</b></a></li>
                   <li><a href="/recipe/christmas/" title="Рождественские рецепты, рецепты на Рождество">Рождественские рецепты</a></li>
                   <li><a href="/recipe/nyrecipe/" title="Новогодние рецепты, рецепты на Новый год 2015">Новогодние рецепты</a></li>
                  </ul>

</div>

        </div>

   </li>
   <li class="vline"><span></span></li>
    <li><a href="/ourrecipe/"><strong>Рецепты посетителей</strong></a>

        <div class="dropdown_1column">

            <div class="col_1">
           <ul>
               <li><a href="/ourrecipe/salads/" title="Cалаты, рецепты салатов от посетителей сайта">Cалаты</a></li>
               <li><a href="/ourrecipe/zakuski/" title="Закуски, рецепты закусок от посетителей сайта">Закуски</a></li>
               <li><a href="/ourrecipe/soup/" title="Первые блюда, рецепты первых блюд (супов) от посетителей сайта">Первые блюда</a></li>
               <li><a href="/ourrecipe/dishes/" title="Вторые блюда, рецепты вторых блюд от посетителей сайта">Вторые блюда</a></li>
               <li><a href="/ourrecipe/baker/" title="Выпечка, рецепты выпечки, тортов, пирогов от посетителей сайта">Выпечка</a></li>
               <li><a href="/ourrecipe/dessert/" title="Десерты, рецепты десертов от посетителей сайта, вкусненькое тут">Десерты</a></li>
               <li><a href="/ourrecipe/drink/" title="Рецепты напитков, коктейлей от посетителей сайта">Напитки</a></li>
               <li><a href="/ourrecipe/sauces/" title="Рецепты соусов, майонезов, кетчупов от посетителей сайта">Соусы</a></li>
               <li><a href="/ourrecipe/mikrovolnovka/" title="Рецепты для микроволновки от посетителей сайта">Для микроволновки</a></li>
               <li><a href="/ourrecipe/konserv/" title="Заготовки на зиму - Варенья, соленья от посетителей сайта">Заготовки</a></li>
           </ul>

</div>
        </div>

    </li>
   <li class="vline"><span></span></li>
    <li><a href="#"><strong>Для тех, кто на диете</strong></a><span class="vline"></span>

        <div class="dropdown_1column">

            <div class="col_2">
           <ul>
               <li><a href="/calc/ccf/" title="">Калькулятор калорийности</a></li>
               <li><a href="/calc/cdc/" title="">Калькулятор калорий</a></li>
               <li><a href="/diet/" title="Диеты">Диеты</a></li>
               <li><a href="/health/" title="Всё про здоровое питание">Здоровое питание</a></li>
               <li><a href="/pravda/" title="Вся правда о продуктах питания">Правда о продуктах</a></li>
               <li><a href="/vitamins/" title="Про витамины">Витамины</a></li>
               <li><a href="/poststol/" title="Постный стол">Постный стол</a></li>

</ul>

</div>
        </div>

    </li>

<li class="vline"><span></span></li>
   <li><a href="/schoolcook/"><strong>Кулинарная школа</strong></a>

        <div class="dropdown_1column">

            <div class="col_1">
           <ul>
               <li><a href="/schoolcook/basis/" title="Основы кулинарии">Основы кулинарии</a></li>
               <li><a href="/chtoprigotovit/" title="Что приготовить">Что приготовить</a></li>
               <li><a href="/gotovim/" title="Блюда из…">Блюда из…</a></li>
               <li><a href="/schoolcook/advice/" title="Кулинарные советы">Кулинарные советы</a></li>
               <li><a href="/menu/" title="Меню на все случаи">Меню на все случаи</a></li>
               <li><a href="/holidays/" title="Праздничный стол">Праздничный стол</a></li>
               <li><a href="/serving/" title="Сервировка стола. Идеи, фотографии, советы и рекомендации">Сервировка стола</a></li>
               <li><a href="/decor/" title="Украшение блюд. Идеи, фотографии, советы и рекомендации">Украшение блюд</a></li>

</ul>

</div>
        </div>

    </li>

</ul>

CSS код:

#menu_center_block {    min-width:1004px;
   max-width:1104px;
   height:60px;
   max-height:60px;
   margin:0;
   padding:0px;
   background: #c52324;
   -moz-box-shadow:inset 0px 0px 1px #edf9ff;
   -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
   box-shadow:inset 0px 0px 1px #edf9ff;

}

#menu_center {
   list-style:none;
   width:884px;
   height:60px;
   margin:0;
   margin-left:20px;
   padding:0px;
   float:left;
}

@media only screen and (max-width: 1024px) {
#menu_center {
   list-style:none;
   width:884px;
   height:60px;
   margin:0;
   margin-left:-15px;
   padding:0px;
   float:left;
}
}

/*
#search_menu_block {
   width:221px;
   height:50px;
   background: #c52324;
   float:right;
}
*/

#menu_center li {
   float:left;
   display:block;
   text-align:center;
   position:relative;
   padding: 18px 10px 10px 10px ;
   margin:1px;
   border:none;
}

ul#menu_center img{
   border:none;
   vertical-align:middle;
   margin-right:5px;
   }

#menu_center li:hover {
   margin:0px;
   margin-top: 6px;
   padding-top:8px;
   border: 1px solid #a00c0c;
   z-index:99999;

/* Background color and gradients */

background: #FFFFFF;

   /* Rounded corners */

   -moz-border-radius: 3px 3px 0px 0px;
   -webkit-border-radius: 3px 3px 0px 0px;
   border-radius: 3px 3px 0px 0px;
}

#menu_center li a {
   font-family:Tahoma, Helvetica, sans-serif;
   font-size:15px;
   color: #fff;
   display:block;
   outline:0;
   text-decoration:none;

}

#menu_center li:hover a {
   color:#d23032;
/*   text-shadow: 1px 1px 1px #ffffff;*/
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
   margin:4px auto;
   float:left;
   position:absolute;
   left:-999em; /* Hides the drop down */
   text-align:left;
   padding:10px 5px 10px 5px;

   border:1px solid #a00c0c;
   border-top:none;

   /* Gradient background */
   background:#FFFFFF;
/*
   background:#F4F4F4;
   background: -moz-linear-gradient(top, #ffffff, #ffcccc);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
*/
   /* Rounded Corners */
   -moz-border-radius: 0px 3px 3px 3px;
   -webkit-border-radius: 0px 3px 3px 3px;
   border-radius: 0px 3px 3px 3px;
}

.dropdown_1column {width: 210px;}
.dropdown_2columns {width: 340px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu_center li:hover .dropdown_1column,
#menu_center li:hover .dropdown_2columns,
#menu_center li:hover .dropdown_3columns,
#menu_center li:hover .dropdown_4columns,
#menu_center li:hover .dropdown_5columns {
left:-1px;
top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
   display:inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
/*border: 1px double black;*/
}
.col_1 {width:200px;}
.col_2 {width:350px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu_center .menu_right {
   float:right;
   margin-right:0px;
}
#menu_center li .align_right {
   /* Rounded Corners */
/*
   -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
*/
}

#menu_center li:hover .align_right {
   left:auto;
   right:-1px;
   top:auto;
}

#menu_center p, #menu_center h2, #menu_center h3, #menu_center ul li {
   font-family:Tahoma, Helvetica, sans-serif;
   line-height:21px;
   font-size:12px;
   text-align:left;
/*   text-shadow: 1px 1px 1px #FFFFFF;*/
}
#menu_center h2 {
   font-size:21px;
   color:#d23032;
   font-weight:400;
   letter-spacing:-1px;
   margin:7px 0 14px 0;
   padding-bottom:14px;
   border-bottom:1px solid #666666;
}
#menu_center h3 {
   font-size:14px;
   margin:7px 0 14px 0;
   padding-bottom:7px;
   border-bottom:1px solid #888888;
}
#menu_center p {
   line-height:18px;
   margin:0 0 10px 0;
}

#menu_center li:hover div a {
font-size:14px;

   color:#d23032;
   padding:6px 7px 8px 14px;
   /*width:100%;*/
   /* Rounded Corners */
/*
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
        border-radius: 3px;
*/
}
#menu_center li:hover div a:hover {
   color:#ffffff;
   background-color:#d23032;
}

.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}

.imgshadow { /* Better style on light background */
   background:#FFFFFF;
   padding:4px;
   border:1px solid #777777;
   margin-top:5px;
   -moz-box-shadow:0px 0px 5px #666666;
   -webkit-box-shadow:0px 0px 5px #666666;
   box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
   width:auto;
   float:left;
   margin:5px 15px 5px 5px;
}

#menu_center li .black_box {
   background-color:#333333;
   color: #eeeeee;
   text-shadow: 1px 1px 1px #000;
   padding:4px 6px 4px 6px;

   /* Rounded Corners */
/*
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
*/
   /* Shadow */
   -webkit-box-shadow:inset 0 0 3px #000000;
   -moz-box-shadow:inset 0 0 3px #000000;
   box-shadow:inset 0 0 3px #000000;
}

#menu_center li ul {
   list-style:none;
   padding:0;
   margin:0 0 6px 0;
}
#menu_center li ul li {
   font-size:12px;
   line-height:24px;
   position:relative;
/*   text-shadow: 1px 1px 1px #ffffff; */
   padding:0;
   margin:0;
   float:none;
   text-align:left;
   width:200px;
}
#menu_center li ul li:hover {
   background:none;
   border:none;
   padding:0;
   margin:0;
}

#menu_center li .greybox li {
   background:#F4F4F4;
   border:1px solid #bbbbbb;
   margin:0px 0px 4px 0px;
   padding:4px 6px 4px 6px;
   width:116px;

   /* Rounded Corners */
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
}
#menu_center li .greybox li:hover {
   background:#ffffff;
   border:1px solid #aaaaaa;
   padding:4px 6px 4px 6px;
   margin:0px 0px 4px 0px;
}

#menu_center .menu_right_block{

   float:right;
   margin-top:-5px;
   background:none;
   border:0px;
}

#menu_center .menu_right_block:hover{

   float:right;
   margin-top:4px;
   left:-1px;
   background:none;
   border:0px;

}

/*
.search_form_site {

   border: 1px solid #a00c0c;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   padding:5px;
   width:220px;
}

#menu_center form{
   width:220px;
   margin:0 auto;
}
#menu_center .search {
   border: 1px solid #a00c0c;
   padding:5px 15px 5px 30px;
   margin:2px;
   background: #ffffff url(img/search.png) no-repeat 8px 6px;
}

#menu_center .rounded {
   border-radius:15px;
   -moz-border-radius:15px;
   -webkit-border-radius:15px;
}

#menu_center .menu_articles_list img {

   float:left;
   padding:0px;
   margin:0px;
   width:110px;

}

#menu_center .vline:hover {
   background:none;
   border: 0px;
   margin-top:10px;
   margin-left:1px;
   margin-right:1px;
}
#menu_center .vline span {
   border-left: 1px solid #ffffff;
}

#menu_center strong {
font-weight:normal;
}

/*
#menu_center .vline:hover{
   border-right: 1px solid #ffffff;
   background:none;
}

Скачать меню с Яндекс.Диска

Ставив лайк Вы помогаете сайту :)

Статьи по теме:

Рейтинг:

5.0/5 из 1