title: Horizontal list (ul) with multiline list item?
body: <p>I have a horizontal list (for a nav bar) and i want an individual list item to be multilined. I tried using a <code>&lt;br /&gt;</code> but that causes the entire list to skip a line </p>
  
  <p>Here's what i got for html :</p>
  
  <pre><code>&lt;ul class="nav_list"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Bar/Bat Mitzvah&lt;br /&gt;Tutoring&lt;a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Early &lt;br /&gt;Childhood&lt;a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.nav_list {
      float:right;
      height:30px;
      margin-top:55px;
      width:510px;
  }
  
  .nav_list li {
      display:inline;
      list-style-type:none;
  
  }
  
  .nav_list li a {
      font-size:18px;
      font-family: arial;
      color:#b64366;
      text-decoration:none;
      padding:4px 4px 5px 10px;
      background-image:url('../images/nav_divider.png');
      background-repeat:no-repeat;
      background-position:right;
      font-weight:bold;
      cursor:pointer;
  
      }
  </code></pre>
  
  <p>And this is what it should look like (photoshop):
  <img src="https://i.stack.imgur.com/66Pf4.png" alt="enter image description here"></p>
  
  <p>Any suggestions?</p>