Search code examples
listpopuphoverline-breakspseudo-class

Alternatives to illegal <br> or <p> within <li> tags on a hover?

Does anyone have a suggestion for creating paragraph-type line spaces within a <li> tag that includes a hovered pop-up pseudo-class?

I have a <span> that pops up on a:hover and I want the text that pops up to be broken into 2 paragraphs. It works with <br> in FF but I want to do the right thing (now that I've discovered it's wrong!)...

html: 

<div id="rightlist">
  <ul>
      <li><a href="">List item
          <span>
             words words words that are "paragraph" 1 of List item
             <br><br>
             different words that make up "paragraph" 2 of List item
          </span></a></li>

css:

#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell; 
z-index: 100 ;
    float: right ;
}

#rightlist ul {
  text-align: left;
margin: 0;
   margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}

#rightlist a 
{
    display: table-cell;
text-decoration: none; color: black; 
background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}

/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px; 
color: white;  background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}



/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
Solution

  • Your problem may arise from the fact that you're using a <span> tag incorrectly.

    Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.

    Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).