Создайте меню, например, меню администратора Wordpress

Question

В моем приложении я пытаюсь создать меню администратора, похожее на меню администратора Wordpress, однако эффект, с которым я изо всех сил сталкиваюсь, - это значок с подсветкой и стрелка вниз. при наведении курсора на пункт меню.

Мое меню выглядит более или менее, как ниже в настоящее время:

<ul id="sideMenu"> 
    <li class="sideMenuItem"> 
     <div class="menu-icon-dashboard menu-image"></div> 
     <%: Html.ActionLink("Dashboard", "Index", "Home")%> 
    </li> 
</ul> 

Мой CSS довольно просто тоже в настоящее время:

#sideMenu 
{ 
    clear: left; 
    float: left; 
    list-style: none outside none; 
    margin: 15px 15px 15px 0px; 
    padding: 0; 
    position: relative; 
    width: 145px; 
} 
.sideMenuItem 
{ 
    background: url('images/menu-bits.gif') repeat-x scroll left -379px #F1F1F1; 
    color: #000000; 
    padding: 5px; 
    border: 1px solid #bbbbbb; 
} 
#sideMenu .menu-icon-dashboard { 
    background: url('images/menu.png') no-repeat scroll -65px -33px transparent; 
} 
#sideMenu div.menu-image { 
    float: left; 
    height: 28px; 
    width: 28px; 
    margin-top: -5px; 
} 

Что бы быть лучшим способом пойти об изменении моего значок меню справа от пункта меню и показывая стрелку вниз слева от пункта меню на мыши?

Answer 1

Wordpress использовал спрайты в качестве фоновых изображений для каждого элемента навигации. Когда пользователь наводится над меню, css вызывает псевдо-селектор hover, чтобы сдвинуть положение фонового изображения, чтобы показать выделенное изображение.

#div { width: 50px; height: 50px; background: url(/path/to/image/) no-repeat 0 0; } 
#div:hover { background-position: 0px -50px; } 

В этом примере показано, потребовало бы изображение, которое 100px высокого - нормальное состояние будет показывать 50px верхнюю половину изображения, и когда происходит парения, то DIV бы тогда показать нижнюю 50px изображения.

Подробнее о css спрайты на css-tricks.com