Hello Spippa and Welcome to the Forums!
The first step is to wrap your code in
[code] code here
[/code] tags
All you need for this type of thing is css! Take a look at this code (which is wrapped in code tags) and tell me what you think!:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul, ol {
list-style: none;
}
.nav {
position: relative;
}
.nav li {
float: left;
}
.nav li a {
display: block;
}
.onHover li a {
width: 60px;
height: 32px;
line-height: 32px;
text-align: center;
}
.onHover li a:hover {
text-indent: -9999px;
}
.onHover .home a:hover {
background: url('http://cdn1.iconfinder.com/data/icons/woothemesiconset/32/home.png') no-repeat center center;
}
.onHover .work a:hover {
background: url('http://cdn1.iconfinder.com/data/icons/woocons1/Briefcase.png') no-repeat center center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu" class="onHover nav">
<li class="home"><a href="#">Home</a></li>
<li class="work"><a href="#">Work</a></li>
</ul>
</div>
</div>
</body>
</html>