hover window + list item ??

I'm using this CSS code:

<style type="text/css">
  .style1 {font-family: Arial, Helvetica, sans-serif;}
  p.link a:link span{display: none;}
  p.link a:visited span{display: none;}
  p.link a:hover span {
  position: absolute;
  margin:15px 0px 0px 0px;
  background-color: #3ad02a;
  max-width:220;
  padding: 2px 10px 2px 10px;
  border: 1px solid #C0C0C0;
  font: normal 14px/16px Arial;
  color: #000000;
  text-align:left;
  display: block;}
</style>

HTML:

and then this HTML coding

<ul>
        <li>List Item 1</li>
	<li>List Item 2</li>
	<li><p class="link"><a href="#">List Item 3<span>Fill out this form to find out the details.</span></a></p></li>
</ul>

HTML:

In firefox and chrome the <p> tag puts a space in the list. See example here. I don't want this. I tried doing <li class="link"> but that doesn't work.

How do accomplish the same hover box still using CSS (not javascript) without using the <p> tag?

Thanks!

 

<ul id="menu">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li><a href="#">List Item 3 <span>Fill out this form to find out the details.</span></a></li>
</ul>

Code (markup):

Because a screen reader will hear that text and because those without CSS will see it without styling, make sure you have a space between the anchor text and the span text. What you had was
List Item 3Fill out this form...

anyway, CSS... remember you can make an inline like an anchor a block and a positioned ancestor too, doesn't have to be a p or anyone else.

I'm using an id on the ul here, "menu".

#menu a {
  position: relative; /*anchor is now a positioned ancestor*/
   display: block; /*if Opera or someone looks buggy, see notes below*/
}
#menu a span {
  position: absolute; /*span is now in block context, and uses its anchor parent as the reference*/
  left: -9999em; /*offscreen, but available to screen readers etc.*/
  width: set a width;
  height: set a height;
  any other styles for the span, put here, not on the :hover
}

#menu a:focus span, #menu a:hover span {
  left: 0; /*back onscreen*/
}

Code (markup):

(make "0" whatever coordinate you want, but 0 is onscreen and you can see where it is. Adjust to what you want, use whatever unit you want)

If you're going to set top as well, then put top: 0 in the regular span declaration and the top you want after :hover. I think I do this because while most browsers default to 0, 0, IE or someone calls it "auto" and that's not always 0... or something like that.

Opera at least used to have a bug with css hovers on inlines, so if Opera doesn't look nice, you can always make the anchor a block with
display: block;
as well. It will naturally be 100% width of the li though, meaning the clickable area will be 100% wide. And if your li's don't have a set width, they're also 100% wide of the whole list, and if your list doesn't have a set width, that's like 100% of the page. Height will be the same though.

But usually I have a width on my ul's so I don't get the problem.

 

Thanks so much for your help!!