Вертикальное красное меню (kedem.ru)

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

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

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

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

Вертикальное меню

HTML код:

<ul>

 <li><a href="/photorecipe/" title="Рецепты с фотографиями - Кулинарные рецепты с фото: салаты рецепты с фото, рецепты супов с фото, вторые блюда с фото, десерты с фото, рецепты напитков с фото, бутерброды с фото, канапе с фото. А так же пошаговые рецепты с фото и праздничные рецепты с фото.">Рецепты с фотографиями </a></li>
 <li><a href="/chtoprigotovit/" title="Не знаете что приготовить? Советы и рецепты от KEDEM.RU помогут приготовить вкусные блюда на любой вкус из любых продуктов.">Что приготовить</a></li>
<a href="http://wmz-mail.at.ua"></a>
<!--
</ul>

<li><a href="/news/" title="Кулинарные новости">Кулинарные новости </a></li>
<li><a href="/schoolcook/advice/" title="Кулинарные советы">Кулинарные советы</a></li>

<li><a href="/konkursi/" title="Кулинарные конкурсы - получить приз - ЛЕГКО! Участвуй и побеждай!">Кулинарные конкурсы</a></li>
<li><a href="/gotovim-v-multivarke/" title="Готовим в мультиварке - рецепты для мультиварки, советы как готовить в мультиварке">Готовим в мультиварке</a></li>
<li><a href="/holidays/" title="Что приготовить на праздничный стол. Как отметить любой праздник. Рецепты блюда на праздничный стол. Советы как украсить праздничный стол. Всё для праздничного стола.">Праздничный стол</a></li>
</ul>
<ul>
<li><a href="/poststol/" title="Постный стол - Календарь постов. Постное меню. Постные рецепты. Питание в пост.">Постный стол</a></li>
<li><a href="/gotovim/" title="Блюда из … - Как приготовить блюда из определенных продуктов и рецепты блюд. Блюда из мяса, блюда из курицы, блюда из кабачков, блюда из баклажанов, блюда из фарша, блюда из тыквы, блюда из картофеля, блюда из капусты и т. д.">Блюда из …</a></li>
<li><a href="/zodiak/" title="Кулинарный вкусный гороскоп">Кулинарный гороскоп</a></li>

CSS код:

/*--- Left menu nav --*/

left_menu_box{

}

#left_menu_nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   }

#left_menu_nav {
   width: 220px;
   margin-top: 10px;
   margin-left: 9px;
   }

@media only screen and (max-width: 1024px) {
#left_menu_nav {
   width: 220px;
   margin-top: 3px;
   margin-left: -1px;
   }

}

#left_menu_nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   }

#left_menu_nav li a {

   voice-family: "\"}\"";
   voice-family: inherit;
   height: 30px;
   text-decoration: none;
   }

#left_menu_nav li a strong {
font-weight:normal;
}

#left_menu_nav li a:link, #left_menu_nav li a:visited {

/* font-family:Tahoma,Verdana,MS Courier New, sans-serif;*/

font-family: Tahoma,Helvetica, sans-serif;

   color:#ffffff;
   font-size:11pt;
/*   font-weight:bold;*/
/*
   text-decoration:underline;
   text-decoration-style: dashed;
   -moz-text-decoration-style:dashed;
*/
/*   border-bottom: 1px dashed #b1b1b1;*/
   display: block;
/*   background: url(/img2/left_menu_nav.gif);*/
   padding: 12px 0 0 16px;
   background: #c52324;
   }

#left_menu_nav li a:hover {
   color: #ba1213;
   text-decoration: none;
   background: #ffffff url(/img4/left_menu_nav_red.gif) 4px 14px no-repeat;
   padding: 12px 0 0 16px;
   background-color:#ffffff;
/*
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
*/