Build a menu like Wordpress' Admin Menu
In my application, I'm trying to achieve an admin menu akin to Wordpress' admin menu, however, the effect I'm struggling with is having the icon highlight and the down arrow show on mouseover of the menu item.

My menu looks more or less like the below at present:

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

My CSS is pretty simple too at present:

    #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;
    }

What would be the best way to go about changing my menu icon on the right of the menu item and showing a down arrow on the left of the menu item on mouse over?
Build a menu like Wordpress' Admin Menu
===

In my application, I'm trying to achieve an admin menu akin to Wordpress' admin menu, however, the effect I'm struggling with is having the icon highlight and the down arrow show on mouseover of the menu item.

My menu looks more or less like the below at present:

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

My CSS is pretty simple too at present:

    #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;
    }

What would be the best way to go about changing my menu icon on the right of the menu item and showing a down arrow on the left of the menu item on mouse over?