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?
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.
[INDENT]<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>[/INDENT]
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.