Help with adding image to drop-down menu - css

Question

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

Answer 1

EDIT:
I see what you're trying to do now. Wrap the contents of the in some sort of container, then you can float elements inside of it. I super-dummed-down your fiddle, but the concept still stands. You should be able to implement it in your markup.
HTML:
<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>
CSS:
#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;
}
Here's a fiddle: http://jsfiddle.net/thomas4g/VL3Sz/15/
Hope this helps!
I can't seem to reproduce your menu so I can't give an exact answer
For anyone stopping by, here was my original answer:
you can use the CSS pseudo class :hover (which i'm sure you're aware of) combined with a background-image, like so:
HTML:
<span class="menu-item">My Epic Menu Item</span>
CSS:
.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;
}
Here's a fiddle if you want to play around with it: http://jsfiddle.net/thomas4g/NQQjX/4/
Please let me know if this isn't want you want, hopefully i can improve the answer.