Nesting Unordered lists within unordered lists?

[happy_hands]

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.

[ray326]

<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.

<ul>
<li>something</li>
<li><ul>
    <li>nested</li>
    <li>nested</li>
</ul></li>
<li>something</li>
</ul>

[happy_hands]

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.

[happy_hands]

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?

<ul>
<li>something
  <ul>
    <li>nested</li>
    <li>nested</li>
  </ul>
</li>
<li>something</li>
</ul>

[HazardTW]

That one looks good.

[happy_hands]

That's good to know.

Thank you