Roll Over Woes

programming web dev
1

I have been having lots of troubble with getting a css roll over positioned horizontally and centered on a page. I’m not shure what’s wrong but when I add <div class=“menu”> the text slides off the image and nothing works.


.menu {
	    height: 26px;
	    width: 188px;
}

.cssnav
{
position: relative;
font-family: arial;
background: url(image1rollover) no-repeat;
white-space: nowrap;
display: block;
width: 99px;
height: 26px;
margin: 0;
padding: 0;
}

.cssnav 
{
display: block;
color: #9F9271;
font-size: 15px;
width: 99px;
height: 26px;
display: block;
float: left;
color: #9F9271;
text-decoration: none;
}

.cssnav img
{
width: 99px;
height: 26px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 31px;
top: 5px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
</style>

<div class="menu">
<div class="cssnav">
<a href="web-link" target="title"><img src="Image1"  alt="Hello"/><span>Home</span></a>
</div class>
</div class>

PS sorry it’s so much code I shortened it as much as I could.