Question

Пытаюсь сделать выдвигающуюся меню, что бы при нажатии на кнопку все категории выпадали из кнопки, вроде бы получилось, но вид кнопки меня не восхищает, хотелось бы сделать ее типа такого вида или даже ткакого если можно. И разумеется у меня там будет не один пункт, буду добавлять еще. вт пример , помогите пожалуйста сделать из этого кота меню типа как на картинке 

 

 

<a class="menu_tip1" href="javascript://" onclick="$('#menu_1').slideToggle('slow');">Все категории</a>
 <div class="inner">
<div id="menu_1" style="display: none;" align="left">  
<div class="glossymenu">
 <a title="" class="menuitem" href="/">Главная</a>
<a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/1">Русские</a>
<a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/2">Зарубежные</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/3">Новинки</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/4">Боевики</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/5">Комедии</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/6">Сериалы</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/7">Ужасы</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/8">Мультфильмы</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/9">Трейлеры(Скоро в кино)</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/10">Военные</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/11">Драма</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/12">Приключения</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/13">Триллер</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/14">Криминал</a>
 <a title="" class="menuitem" href="http://asd-kinozal.3dn.ru/load/15">Фантастика</a>
</div>
</div>  
 

Answer 1

Здравствуйте вот этот код вставте в вашу таблицу стилей

 

#menu_1 a, a.menu_tip1 {
    background: url("http://s017.radikal.ru/i436/1504/60/f17b606298a7.png") no-repeat;
    display: block;
    width: 200px;
    height: 50px;
    font: 18px Arial,Tahoma,sans-serif;
    color: #444B52;
    line-height: 50px;
    padding: 0 0 0 15px;
    overflow: hidden;
}
#menu_1 a:hover, a.menu_tip1:hover {
    background: url("http://s017.radikal.ru/i436/1504/60/f17b606298a7.png") ;
    background-position: 0 54px;
    color: #FFF;
}

адрес картинки смените на свой так как я её переименовал

 

Answer 2

Здравствуйте, вот так:

.menuitem {background: url('http://s017.radikal.ru/i436/1504/60/f17b606298a7.png') 0px 0px no-repeat transparent; font: 700 12px 'arial'; width:200px; height:45px; line-height:45px; padding:5px 0px 5px 25px; color:#41abf7; text-decoration:none; display:block;}
.menuitem:hover {background: url('http://s017.radikal.ru/i436/1504/60/f17b606298a7.png') 0px -55px no-repeat transparent; color:#f4f4f4;}