www.webdeveloper.com
Results 1 to 6 of 6

Thread: Nesting Unordered lists within unordered lists?

  1. #1
    Join Date
    Jul 2004
    Location
    Reading, UK.
    Posts
    104

    Post Nesting Unordered lists within unordered lists?

    For some navigation around the website, I've got a list of navigation links, some of which have a subset of navigation, at the right of the following page:
    http://www.therapy-agency.com/corporate/

    HTML
    <div id="side-sectional-nav">
    <ul>
    <li><a href="#">SECURE LOGIN</a></li>
    <li><a href="#">AT YOUR WORKPLACE &gt;</a></li>
    </ul>
    <ul>
    <ul>
    <li><a href="#">Workplace Stress </a></li>
    <li><a href="#">Physical Strains and Pains </a></li>
    <li><a href="#">Employee Incentives </a></li>
    <li><a href="#">Benefiting Profit Margins </a></li>
    <li><a href="#">Case Studies </a></li>
    <li><a href="#">Treatment Guide </a></li>
    <li><a href="#">Frequently Asked Questions </a></li>
    <li><a href="#">Price Guide &gt;</a></li>
    </ul>
    </ul>
    <ul>
    <ul>
    <ul>
    <li><a href="#">Book a Therapy Day </a></li>
    <li><a href="#">Request a Brochure</a></li>
    <li><a href="#">Deals, Offers &amp; Promotions </a></li>
    <li><a href="#">Subsidised Days</a></li>
    <li><a href="#">Therapy Vouchers</a></li>
    <li><a href="#">Therapy Credits</a></li>
    <li><a href="#">Request a Quote </a></li>
    </ul>
    </ul>
    </ul>
    <ul>
    <ul>
    <li><a href="#">Contact Us &gt;</a></li>
    </ul>
    </ul>
    <ul>
    <ul>
    <ul>
    <li><a href="#">Book a Therapy Day</a></li>
    <li><a href="#">Request a Brochure</a><a href="#"></a></li>
    </ul>
    </ul>
    </ul>
    </div>
    CSS:
    #side-column {
    width: 180px;
    float: right;
    font-size: 10px;
    color: #FFFFFF;
    }

    #side-column ul {
    margin: 0;
    padding: 0;
    }

    #side-column a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #side-sectional-nav {
    text-align: left;
    }

    #side-sectional-nav ul {
    list-style-type: none;
    }

    #side-sectional-nav ul li, #side-sectional-nav ul ul li, #side-sectional-nav ul ul ul li {
    list-style-type: none;
    padding: 3px 2px 3px 5px;
    margin: 0;
    }

    #side-sectional-nav ul li {
    padding: 3px 2px 3px 5px;
    }

    #side-sectional-nav ul ul li {
    padding: 3px 2px 3px 15px;
    }

    #side-sectional-nav ul ul ul li {
    padding: 3px 2px 3px 25px;
    }
    I originally had these lists in the format similar to:
    <ul>
    <li><a href="#">SECURE LOGIN</a></li>
    <li><a href="#">AT YOUR WORKPLACE &gt;</a></li>
    <ul>
    <li><a href="#">Workplace Stress </a></li>
    <li><a href="#">Physical Strains and Pains </a></li>
    <li><a href="#">Employee Incentives </a></li>
    <li><a href="#">Benefiting Profit Margins </a></li>
    <li><a href="#">Case Studies </a></li>
    <li><a href="#">Treatment Guide </a></li>
    <li><a href="#">Frequently Asked Questions </a></li>
    <li><a href="#">Price Guide &gt;</a></li>
    <ul>
    <li><a href="#">Book a Therapy Day </a></li>
    <li><a href="#">Request a Brochure</a></li>
    <li><a href="#">Deals, Offers &amp; Promotions </a></li>
    <li><a href="#">Subsidised Days</a></li>
    <li><a href="#">Therapy Vouchers</a></li>
    <li><a href="#">Therapy Credits</a></li>
    <li><a href="#">Request a Quote </a></li>
    </ul>
    </ul>
    </ul>
    However, although the original method displayed quite happily in Mozilla, it seemed to cause some issues when using IE (in that the hover colour changes, affected the whole nested list, rather than just the list item).

    Therefore, effectively closing each list, and then re-opening seemed to give the preferred results in both Mozilla, and IE, however, when checking it for valid xml with W3C, it comes up with a bunch of warnings that I'm not using the list tags appropriately.

    So can anyone please let me know what I need to do, to give the effect as shown on the link at the top, but with valid html/xml?

    I look forward to hearing any ideas you may have.

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    HTML Code:
    <ul>
    <ul>
    <ul>
    <li><a href="#">Book a Therapy Day</a></li>
    <li><a href="#">Request a Brochure</a><a href="#"></a></li>
    </ul>
    </ul>
    </ul>
    This kind of thing is very wrong. The only thing a UL can contain is one or more LIs. For nested lists you put the nested UL in an LI.
    HTML Code:
    <ul>
    <li>something</li>
    <li><ul>
        <li>nested</li>
        <li>nested</li>
    </ul></li>
    <li>something</li>
    </ul>

  3. #3
    Join Date
    Jul 2004
    Location
    Reading, UK.
    Posts
    104

    resolved

    That's great. Thank you.

    I figured there was something going on that wasn't quite right!

    I'll now play around with the CSS again for a bit, to try and get the required roll-over effect.

    Much appreciated.

  4. #4
    Join Date
    Jul 2004
    Location
    Reading, UK.
    Posts
    104
    So to try and help nestle the relevant sub-links within the main one (rather than having it as a new point), is this type of list valid?

    HTML Code:
    <ul>
    <li>something
      <ul>
        <li>nested</li>
        <li>nested</li>
      </ul>
    </li>
    <li>something</li>
    </ul>

  5. #5
    Join Date
    Apr 2007
    Posts
    153
    That one looks good.

  6. #6
    Join Date
    Jul 2004
    Location
    Reading, UK.
    Posts
    104
    That's good to know.

    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles