Safari incorrectly rendering list items

I have an unordered list, somthing like this

<ul>
 <li>
  <div>filled with other stuff</div>
 </li>
 <li>
  <div>filled with other stuff</div>
 </li>
 <li>
  <div>filled with other stuff</div>
 </li>
</ul>

When I look at the list in S开发者_运维百科afari, list is displayed wrong and when I inspect the html, I get something like this

<ul>
 <li>
  <div>filled with other stuff</div>
  <li>
    <div>filled with other stuff</div>
    <li>
     <div>filled with other stuff</div>
    </li>
  </li>
 </li> 
</ul>

Any ideas why that is only happening in Safari?

Your markup is wrong. You can't nest an li in an li without a ul coming first.

If you want to do nested lis you need to start a new ul

<ul>
<li>lorem
 <ul>
  <li>ipsum</li>
  <li>dolor</li>
 </ul>
</li>
</ul>

Best not to use divs in the li if you can avoid it (which you certainly can) - if you need an li to act like a block add display:block to your css.