title: Alternatives to illegal <br> or <p> within <li> tags on a hover?
body: <p>Does anyone have a suggestion for creating paragraph-type line spaces within a <code>&lt;li&gt;</code> tag that includes a hovered pop-up pseudo-class?</p>
  
  <p>I have a <code>&lt;span&gt;</code> that pops up on <code>a:hover</code> and I want the text that pops up to be broken into 2 paragraphs.  It works with <code>&lt;br&gt;</code> in FF but I want to do the right thing (now that I've discovered it's wrong!)...</p>
  
  <p>html: </p>
  
  <pre><code>&lt;div id="rightlist"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;List item
            &lt;span&gt;
               words words words that are "paragraph" 1 of List item
               &lt;br&gt;&lt;br&gt;
               different words that make up "paragraph" 2 of List item
            &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#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 &lt;a&gt; item (but before the &lt;span&gt; tag) on hover*/
  #rightlist a:hover {
  color: white;
  }
  
  /*appearance of the spanned content within &lt;a&gt;&lt;/a&gt; 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 &lt;a&gt; tags when hovered*/
  #rightlist a:hover span {
  display: table-cell ;
  }
  </code></pre>