Inserting ul inside another ul, is this valid?

Get Started
1

Hi,

I need to insert a ul inside of another ul, but it should not be inside an li. Let me show.

<ul>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Subscriptions</a></li>
          <ul class="sub">
              <li><a href="#">Daily Health Tips</a></li>
               <li><a href="#">Daily Recipes</a></li>
               <li><a href="#">Daily Inspirations</a></li>
           </ul>
       </ul>

Notice that the .sub ul is not inside the li. Is this valid XHTML or not?
It displays fine in all major browsers, except IE. In IE the .sub ul is just collapsed. That’s why I was wondering if it was valid xhtml, as I have tried almost every rule in the book to get it to display.

I know one can put it like this:

<ul>
     <li><a href="#">Overview</a></li>
     <li>Subscriptions
        <ul class="sub">
          <li><a href="#">Daily Health Tips</a></li>
           <li><a href="#">Daily Recipes</a></li>
           <li><a href="#">Daily Inspirations</a></li>
         </ul>
      </li>
</ul>

But I have some display problems with this. Was just wondering.

Thanks

2

No it isn’t valid. The only tag allowed directly inside a <ul> is a <li> so to place a <ul> inside another <ul> you need to do it the second way you show which is the only valid way. Don’t know why you put a class on it though as it serves no purpose since the CSS can be set independently for the nested list without it.

3

What you need to do is this:

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

This will make the second list a sub-list of one of the list items (which, semantically, is what you’re trying to do as well). You can then give it special properties using CSS, e.g.:

li ul li {
 font-style: italic;
}
4

But I have some display problems with this. Was just wondering.

If you tell us what the display problem is we can help you fix it using valid html/css rather than using invalid code to achieve the effect you want :).

Nested lists are used all the time and although they can be awkward at times they can also be tamed quite easily.

5

Well tough luck, but it isn’t legal html to do that. Period. I used to make the same mistake all the time and it took me a long time to learn how to do it right, but eventually I did. The ONLY allowed first level children inside a UL are LI tags. Period. That’s the way it’s specified and you have to learn to live with it like I did.

Of course you could continue to do it the illegal way, but then you have no guarantee about how any browser will render your CSS rule-set. CSS for invalid html is not defined, and up to the browser, and since there is no standard way to error correct then, unsurprisingly, browsers do it different ways.