Menu
Hi all,
Horizontal list problem:
Cannot get a horizontal list to rollover – it just works in a tiny area where the   is.
HTML:
[CODE]
<ul id=”navlist” >
<li id=”nav_home” title=”return home”>
<a href=”index.php”>
</a>
</li>
<li id=”nav_radio” title=”go to radio”>
<a href=”http://www.radi1.com”>
</a>
</li>
<li id=”nav_web” title=”visit itv”>
<a href=”http://www.itv.com” title=”blog”>
</a>
</li>
</ul>
CSS:
[code=html]
@charset “utf-8”;
/* CSS Document */
ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li {
display: inline-block;
list-style-type: none;
height:56.7px;
float:left;
}
#navlist li, #navlist a {
text-decoration: none;
height:56.7px;
}
#navlist a:hover {
text-decoration: none;
}
#nav_home{
display:block;
width:170px;
height:56.7px;
background:url(../imgs/nav/home.png) 0px 0px no-repeat;
}
#nav_home a:hover{
height:56.7px;
width:170px;
background: url(../imgs/nav/home.png) 0 -56.7px;
display:block;
}
#nav_radio {
width:180px;
height:56.7px;
background:url(../imgs/nav/radio.png) 0px 0px no-repeat;
display:block;
}
#nav_radio a:hover{
height:56.7px;
width:180px;
background: url(../imgs/nav/radio.png) 0px -56.7px;
display:block;
}
#nav_web{
width:145px;
height:56.7px;
background:url(../imgs/nav/blog.png) 0px 0px no-repeat;
}
#nav_web a:hover{
height:56.7px;
width:145px;
background: url(../imgs/nav/blog.png) 0px -56.7px;
display:block;
}