What am I doing wrong - can't get pointer to work

I am using an image for my pointer on this page http://dev-lavely.virtualhorizons.com/aboutus.htm

I can't seem to get the pointer to be below my text and everytime I mouse over the menu gets wacked out.

I have the same problem here http://dev-lavely.virtualhorizons.com/default.htm

I really could use some help.

my code:

.menutop {
	position: relative;
	top: 20px;
	left: 20px;
  	padding:0;   
  	list-style-type:none; 
  }
  
.menutop li {
  float:left;
}
  
.menutop a {
  position:relative; 
  text-decoration:none; 
  float:left; 
  font-family: Arial, Verdana, sans-serif;
  font-size:12px;
  color: #000000	
  }
  
.menutop a span {
  display:block;   
  text-align:center; 
  padding:4px 16px; 
  cursor:pointer;
}
  
.menutop a:hover { 
  	color:#000000;
  	background-image: url('../images/pointer.jpg');
	padding: 10px 0px 0px 0px; 
	width: 30px;
	height:	9px;
	background-repeat: no-repeat;
}
  
.menutop a:hover span {
  color:#000; 
  }

<ul class="menutop">
<li><a href="aboutus.htm"><span>ABOUT US</span><em></em></a></li>
<li><a href="products.htm"><span>PRODUCTS</span><em></em></a></li>
<li><a href="services.htm"><span>SERVICES</span><em></em></a></li>
<li><a href="contact.htm"><span>CONTACT</span><em></em></a></li>
</ul>

Code (markup):

 

Ok, I think I got the pointer working, but I am not sure how to set up my css so that when I land on that page the pointer is "on"

 

Add this to your stylesheet;

.active {
color:#000000;
background-image: url('../images/pointer.jpg');
padding: 10px 0px 0px 0px;
width: 30px;
height: 9px;
background-repeat: no-repeat;
}

Then;

<ul class="menutop">
<li><a href="aboutus.htm" class="active"><span>ABOUT US</span><em></em></a></li>
<li><a href="products.htm"><span>PRODUCTS</span><em></em></a></li>
<li><a href="services.htm"><span>SERVICES</span><em></em></a></li>
<li><a href="contact.htm"><span>CONTACT</span><em></em></a></li>
</ul>

 

Also, why do you have EM tags at the end of your links??

 

NineDesign,

Thanks,

I was at this site http://www.cssplay.co.uk/menus/pointer.html and the code has them in it, As a beginner css'r I don't know better. Do I need them? I am not sure what they do.

-- edited

I should also say I switch out my image and I am no longer using it. here my code now: When I try to apply the active css code it whacks out my menu.

.menutop {
	position: relative;
	top: 20px;
	left: 20px;
  	padding:0;   
  	list-style-type:none; 
  }
  
.menutop li {
  float:left;
}
  
.menutop a {
  position:relative; 
  text-decoration:none; 
  float:left; 
  font-family: Arial, Verdana, sans-serif;
  font-size:12px;
  color: #000000	
  }
  
.menutop a span {
  display:block;   
  text-align:center; 
  padding:4px 16px; 
  cursor:pointer;
}
  
.menutop a:hover { 
  color:#000000;
}
  
.menutop a:hover span {
  color:#000; 
  }
    
.menutop a em {
  display:none;
  }  
 
 
.menutop a:hover em {
  display:block; 
  overflow:hidden; 
  border:0px solid #6EA7C2; 
  border-color:#6EA7C2 #fff; 
  border-width: 0px 20px 12px 20px; /*top-right-bottom-left*/ 
  position:absolute; 
  top: 17px;
  height: 4px;
  left:26%; 
  margin-left:0px;
  }
  
.active { 
  display:block; 
  overflow:hidden; 
  border:0px solid #6EA7C2; 
  border-color:#6EA7C2 #fff; 
  border-width: 0px 20px 12px 20px; /*top-right-bottom-left*/ 
  position:absolute; 
  top: 17px;
  height: 4px;
  left:26%; 
  margin-left:0px;
}

Code (markup):

 

Remove your position tags, using them is asking for trouble. If you must place your menu (and items) in a specific area of the screen then use margins... They do the trick every time.

While you're on CSSPlay check out the examples of menu's there and compare the CSS code to yours... You're menu has too much CSS applied to it when floats will do the trick perfectly.

 

Thats were I got my code from was CSSPlay and it had all that code with it except the position tags. I don't understand half of it.

 

I am drowing here in my sorrows, I just can't figure this out.

 

i think you got the wrong code...

try this out

a:hover {
cursor: url(imagefile);

Code (markup):