Validation problem Div inside ul

[slisebry]

I've got a problem, I'm creating some kind of menu with ul and li but if they click on a link, the menu should go open so more links come out but i'm trying this with <div> inside a <ul> but then I get a validation error, is there something that I can change the code and get the same result?

<ul>
                	<li>Knight Online(USA)</li>
                    <div>
                    	<ul>
                        	<li>News</li>
                            <li>Guides</li>
                            <li>Heavenfire Download</li>
                            <li>Heavenfire Purchase</li>
                        </ul>
                    </div>
                    <li>Hero Online(USA)</li>
                    <div>
                    	<ul>
                        	<li>News</li>
                            <li>Guides</li>
                            <li>Heavenfire Download</li>
                            <li>Heavenfire Purchase</li>
                        </ul>
                    </div>
                </ul>

[C. Ankerstjerne]

Why would you put a DIV inside a UL? Nested menus/lists should be done like this:

<ul id="navigation">
  <li>Knight Online (USA)
    <ul>
      <li>News</li>
      <li>Guides</li>
      <li>Heavenfire Download</li>
      <li>Heavenfire Purchase</li>
    </ul>
  <li>Hero Online (USA)
    <ul>
      <li>News</li>
      <li>Guides</li>
      <li>Heavenfire Download</li>
      <li>Heavenfire Purchase</li>
    </ul>
  </li>
</ul>

You can then use CSS to style the menu as you want, e.g.

#navigation li ul {
  display: none;
}
 
#navigation li:hover ul {
  display: block;
}

[slisebry]

yeah stupid me
thanks I'll try that.

[Ed Seedhouse]

The only legal child of UL is LI. LI can have block elements such as DIV as a chile, but UL cannot.

[slisebry]

the problem is I have list-style in my li and the other don't have to and I was hoping I didn't have to make a class for that

but if that's the only solution I'll have to do that

[C. Ankerstjerne]

If you are thinking about the nested ULs and LIs, you can specify the level of embedding in the stylesheet, e.g.

ul {
  list-style-type: none;
}
 
ul li ul {
  list-style-type: disc;
}

[annestahl]

I use divs or spans inside lists when we do fancy dropdown menus, using background gradients, rounded corners and dropshadows that all need to grow if the list grows. And even under xhtml-strict these validate. the trick is to have the div inside the <li> which is hovered. w3c validates this just fine.

e.g.

<li class="hasDropdown" id="mainNav_broadband"><a href="#" class="parent">Broadband Communications</a> <span class="dropdown-top"></span>
<div class="dropdown-wrapper">
<ul>
<li class="first hasDropdown secondary"><a href="#" class="secondaryParent">Broadband Comm 1</a>
<div class="dropdown-wrapper">
<ul>
<li><a href="#">Broadband Comm 1</a></li>
<li><a href="#">Broadband Comm 2</a></li>
<li><a href="#">Broadband Comm 3</a></li>
<li><a href="#">Broadband Comm 4</a></li>
</ul><!-- /second level dropdown-->

</div><!-- /dropdownwrapper-->
</li>
<li><a href="#">Broadband Comm 2</a></li>
<li><a href="#">Broadband Comm 3</a></li>
<li><a href="#">Broadband Comm 4</a></li>
</ul>
</div><!-- /.dropdown-wrapper -->
</li>

Anne Stahl
UI developer for Level Studios

[Arlen]

The original issue was that you can't have a div as child of ul, which is right, but you can have div as child of li, so you *can* do as Annestahl suggested.

Also, in the earlier example code given, you should close the li that contains the nested ul after you close the ul.

One thing also that almost every CMS ignores is that you cannot have an empty ul. Every ul is required to have at least one li.