Help with adding image to drop-down menu

I have a CSS based drop-down menu, which I am implementing into wordpress, however I need help in adding a image on the right side of my links when a user hoovers over a link from the menu. Below is my code and here is a similar effect I've seen done and would like to get the same effect on my menu as well.

Something like this: http://www.clydequaywharf.co.nz/

html

<div class="header">

    <div class="nav-holder">
        <ul id="nav">
            <li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
        </ul>

    </div>

</div>

css

.nav-holder {
    height: 32px;
    width: 1010px;
    float: right;开发者_开发百科
    position: relative;

}
#nav {
    font-family: Arial;
    font-size: 12px;
    float: right;
    margin: 0px 30px 0 0px; padding:  0 0px 0 0px;
    color: #FFF;
}

#nav li a, #nav li {
    float: left;
    text-transform: capitalize;
    z-index: 9997;


}

#nav li {
    list-style: none;
    position: relative;
    list-style-position: outside;
}

#nav li a:hover { background:white; color: #666; font-weight: normal; }
#nav li:hover > a { background:white; color: #666; font-weight: normal;}
#nav li a {
    margin: 0px 0px 0px 15.2px;
    padding: 10px 8px 8px 8px;
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
    font-weight:normal;
    letter-spacing: 0.8px;
    z-index: 1006;

    /* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); */
    /* background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); */
}


#nav li li a:link {
    background-color: white;
    color: #333;
    font-size: 12px;
    z-index: 9995;
    height:22px;

    /* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
    /* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}

#nav li li a:hover {
    background: white;
    color: #8B7500;
    z-index: 9996;


    /* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
    /* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}

/* Submenu */

#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0px 1px 8px 1px; margin: 0px 0px 0px 0px;
}

#nav li:hover ul {
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 15px;
    width:   184px;
    display: block;
    z-index: 5000;

}

#nav li ul li a {
    float: none;
    letter-spacing: 0.0em;
    background: white;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 12px; /* Move text inside menu */
    z-index: 1000;
    font-size: 12px;
    color: #666;        
    word-spacing: wrap;
    text-transform: lowercase;
    *margin-left: -9px;
}

#nav li ul li {
    _display: inline; /* for ie6 */
    background: url(../images/wordpress.png) no-repeat;
}

#nav li ul li a {
    width: 158px;
    display: block;

}
/* *** */

/* Sub Sub Menu */
#nav li ul li ul {
    display: none;
}

#nav li ul li:hover ul {
    left: 100%;
    top: 0;
    z-index: 1000;
}

EDIT:

I see what you're trying to do now. Wrap the contents of the

<ul id="nav">
    <li>
        <a>Past Projects</a>
        <div class="menu-item-container">
            <img src="http://lorempixum.com/100/100/" class="menu-image">
            <ul class='children'>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul></div>
    </li>   
</ul>

#nav li {
    list-style: none;
    position: relative;
}
#nav li div.menu-item-container {
    position: absolute;
    left: 0;
    top:100%;
    display:none;
}
#nav li:hover div.menu-item-container {
 display:block;   
}
#nav li img.menu-image {
    
    float:right;
}
#nav li ul.children {
float:left;
}

<span class="menu-item">My Epic Menu Item</span>

.menu-item {
 padding:5px;   
 padding-right:25px;
}
.menu-item:hover {
    background-image:url("http://lorempixum.com/20/20/");
    background-position:right;
    background-repeat:no-repeat;
}