At the moment I’m working on an Intranet that has to comply completely to the Dutch ‘webrules’ (Webrichtlijnen - http://www.webrichtlijnen.nl/).
One part of this is that the navigation has to be a ‘<ul><li>’- structure instead of the standard SharePoint table-structure.
Therefore we adjusted the rendering of the topnavigation so now neat XHTML is rendered.
The challenge is to make this menu, which is a foldout-menu, compliant to IE6 and IE7.
The folding uses the following css-code for hiding and revealing:
div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
However a hover on a li-element doesn’t function in IE6 en IE7.
The solution is to make use of the following HTC-file:
http://www.xs4all.nl/~peterned/csshover.html#changes.
This file is referenced from out the CSS:
body{ behavior: url("../includes/csshover.htc");}
The result is a browsercompliant accessible foldout topnavigation that uses the standard SharePoint SiteMapDataSource.