SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inserting ul inside another ul, is this valid?

    Hi,

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

    Code:
    <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:

    Code:
    <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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    What you need to do is this:

    Code html4strict:
    <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.:

    Code css:
    li ul li {
     font-style: italic;
    }
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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. #5
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jarvis-88 View Post
    I need to insert a ul inside of another ul, but it should not be inside an li.
    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.
    Ed Seedhouse


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •