Css hover - old

by vincentieo

HTML

<div id="menu">
<p style="margin-right: 10px;">
<ul id="image-menu">
    <a href="/#middle"><li class="home_menu"></li></a> |
    <a href="/#top"><li class="about"></li></a> | 
    <a href="/#right"><li class="stories"></li></a> | 
    <a href="/#bottom"><li class="whats_on"></li></a> | 
    <a href="/#left"><li class="get_involved"></li></a> | 
    <a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"><li class="tickets"></li></a> | 
    <a href="/index.php/twayf/contact"><li class="contact"></li></a>
</ul>
</p>

</div>

CSS

#image-menu ul {line-height: 20px;}

#image-menu li {list-style: none; height: 22px; display: inline-block;}

#image-menu a {display:inline-block;}

.home_menu {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/home1.png); background-repeat: no-repeat; width: 50px; }
.home_menu:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/home2.png);}

.about {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/about1.png); background-repeat: no-repeat; width:64px; }
.about:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/about2.png);}

.stories {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/stories1.png); background-repeat: no-repeat; width:88px; }
.stories:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/stories2.png);}

.whats_on {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/whats_on1.png); background-repeat: no-repeat; width:108px; }
.whats_on:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/whats_on2.png);}

.get_involved {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/behind_the_scenes1.png); background-repeat: no-repeat; width:192px; }
.get_involved:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/behind_the_scenes2.png);}

.tickets {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/tickets1.png); background-repeat: no-repeat; width:83px; }
.tickets:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/tickets2.png);}

.contact {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/contact1.png); background-repeat: no-repeat; width:83px; }
.contact:hover {background-image: url(http://www.theworldatyourfeet.co.uk/images/menu/contact2.png);}