November 2004

Ik bouw de menu's voor de navigatie door mijn site op met lijsten, met <ul>. Submenu's zijn dan 'geneste' lijsten. Met CSS verberg ik die submenu's in grafische browsers, tenzij een bezoeker met de muiscursor over een menuoptie schuift waar zo'n submenu in zit. Dan springt dat submenuutje tevoorschijn.

De basisstructuur voor zo'n menu is heel eenvoudig:

de markup

<ul>
  <li><a href="#1">menu item 1</a></li>
  <li><a href="#2">menu item 2</a>
    <ul>
      <li><a href="#2.1">menu item 2.1</a></li>
      <li><a href="#2.2">menu item 2.2</a></li>
      <li><a href="#2.3">menu item 2.3</a></li>
    </ul>
  </li>
  <li><a href="#3">menu item 3</a></li>
</ul>

de stijlen

ul {
	width:$width;
	z-index:1; }

li {
	display:block;
	width:100%;
	height:$height;
	background-color:$bgcolor;
	color:$color;
	list-style:none;
	text-indent:0;
	text-align:center;}

li ul {
	display:none;
	visibility:hidden; }

li:hover ul {
	display:block;
	width:$width;
	visibility:visible;
	position:relative;
	top:-$offset;
	left:$offset;
	z-index:2; }

a,
a:link,
a:visited,
a:focus,
a:hover,
a:active {
	display:block;
	width:100%;
	font-style:normal;
	font-weight:normal;
	text-decoration:none; }

div#menu ul li a:hover {
	display:block;
	width:100%;
	background-color:$bgcolor;
	color:$color; }

Jammer is, dat de antieke browser Internet Explorer niet meedoet. IE kan niets met de pseudoclass :hover die op een ander element wordt geplaatst dan het anchor element.

Dat betekende, dat ik voor IE had bepaald dat dan in Godsnaam alle menu's maar helemaal zichtbaar moesten zijn. Lelijk, maar ik had even geen andere oplossing.

Inmiddels hebben alle pagina's die onderdeel zijn van een subsectie van mijn site een apart menu waarin de accesskeys zijn opgenomen die toegang bieden tot die sectie. Daarmee is de noodzaak alle menu-items integraal te laten zien, verdwenen.

Ik houd nu dus de submenu's voor de IE-gebruikers verborgen. Ik heb wat dagen gevolgd of bezoekers van mijn site nog wel door het geheel konden navigeren, maar dat lijkt geen enkel probleem. Dit is voor nu dus voorlopig de status quo.