Question

Example:

I am wondering what would be the correct way to code an un-ordered list inside of an unordered list like the design above.

I am assuming that it would be like:

<ul>
  <li>
   <a href="#"> site 2  </a>
   <ul> 
     <li> <a href="#"> link 1 </a></li>
     <li> <a href="#"> link 2 </a></li>
     <li> <a href="#"> link 3 </a></li>
  </li>
 <li>
   <a href="#"> site 2  </a>
   <ul> 
     <li> <a href="#"> link 1 </a></li>
     <li> <a href="#"> link 2 </a></li>
     <li> <a href="#"> link 3 </a></li>
  </li>
</ul>

or

<ul>
  <li> blah </li>
  <ul>
     <li> inside list item </li>
  </ul>
</ul>

Would this be the correct way, if not what would it?

Answer 1

While both methods will render correctly in the browser, only one method appears to be valid HTML.

Invalid:

<ul>
  <li>Test</li>
  <ul>
    <li>Test</li>
  </ul>
</ul>

Valid:

<ul>
  <li>Test</li>
  <li><ul>
    <li>Test</li>
  </ul></li>
  <li>Test Test
    <ul>
      <li>Test</li>
    </ul>
  </li>
</ul>