Vertically center sprite arrow in menu item

Vote count:

0

I'm attempting to use a sprite image and a class to mark a particular menu item as having children. I've got it working, but I don't think I can vertically center the background image. Also not sure this is the best way to hang an arrow (that changes on hover) to the side of a menu. I was kinda set on sprites because it'd be my first chance to play with them, and I wanted to do arrows in all cardinal directions for reuse...

<nav class="nav">
    <div class="nav">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="justjoelabout.html">ABOUT</a></li>
            <li><a href='#' class="hasChildren"><span>WORK</span></a>
                <ul>
                    <li class="services1"><a href="justjoelprint.html">PRINT</a></li>
                    <li class="services1"><a href="justjoelbranding.html">BRANDING</a></li>
                    <li class="services1"><a href="justjoeleditorial.html">EDITORIAL</a></li>
                    <li class="services1"><a href="justjoelphotography.html">PHOTOGRAPHY</a></li>
                </ul>
            </li>
            <li><a href="justjoelblog.html">BLOG</a></li>
            <li><a href="justjoelinspired.html">INSPIRED</a></li>
            <li><a href="justjoelcontact.html">CONTACT</a></li>
        </ul>
    </div>
</nav>

Relevant CSS:

.hasChildren:after {
content:" ";
display: inline-block;
margin-left: 5px;
background-image: url("http://ift.tt/1hnE7jR");
background-repeat: no-repeat;
background-position-x:0;
background-position-y:0;
width: 8px;
height: 4px;
}
.hasChildren:hover:after {
background-image: url("http://ift.tt/1hnE7jR");
background-position-x:0;
background-position-y:-4px;
}

Fiddle here

asked 53 secs ago

xolsiion

10