Detta är ett exempel på hur man med enbart CSS och HTML kan få en fungerande meny med undermenyer

Denna CSS-mall fungerar från början inte för webbläsaren IE och detta beror på att Microsoft inte hanterar hover på icke-länkar. För att få menyerna att fungera även på IE måste man ladda ner och använda en fil som heter "csshover.htc". Efter CSS-koden för menyerna visar länken till filen och hur du ska göra för att få menyerna att fungera för IE

CSS-kod:
Börja med att definiera en DIV-box som innehåller hela menysystemet.
Sedan definieras en onumrerad lista som används för undermenyerna. Rubriken H2 används för huvudmenyn och A är länkarnas utseende

#menu
{
width: 100%;
background: #eee;
float: left;
}

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 150px;
float: left;
}

#menu a
{
font: 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu H2
{
font-size: 12px;
border-color:#00f;
margin: 0;
padding: 0;
}

#menu A
{
color: #000;
background: #efefef;
text-decoration: none;
}


Sedan måste vi definiera vad som händer när vi för musen över menyerna

#menu A:hover
{
color: #a00;
background: #fff;
}


Nu måste vi positionera var undermenyerna skall hamna.

#menu li {position: relative;}

#menu ul ul ul
{
position: absolute;
top: 0;
left: 100%;
}


Nu har vi ett litet problem att fixa. När vi för musen över menyn så ökar höjden på DIV-boxen som innehåller alla undermenyer.
Detta innebär att all text kommer att flyttas ner på sidan. För att undvika detta så ändrar vi så att undermenyerna alltid visas överst.

#menu ul ul
{
position: absolute;
z-index: 500;
}



När alla undermenyer är fixade måste vi gömma dem så att de inte syns

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}


Sedan måste vi visa undermenyerna när vi för musen över menyerna.

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


Nu skall vi få menyerna att fungera även för IE. Först måste du hämta filen "csshover.htc". Den finns att hämta på Peter Nederlof hemsida www.xs4all.nl/~peterned/csshover.html

Länken direkt till filen är: csshover.htc
När filen är hämtad måste denna kod klistras in

<!--[if IE]>
<style type="text/css" media="screen">
body
{
  behavior: url(csshover.htc);
  font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->


Nu kan vi gå över till HTML-koden som behövs för att visa undermenyerna.

<DIV id="menu">
<ul>
  <li><a href=""><h2>Meny 1</h2></a>
     <ul>
       <li><a href="#">undermeny 1</a></li>
       <li><a href="#">undermeny 2</a></li>
     </ul>
   </li>
</ul>
<ul>
   <li><a href=""><h2>Meny 2</h2></a>
     <ul>
       <li><a href="#">undermeny 1  <IMG SRC="basbilder/arrow.gif" WIDTH="35" HEIGHT="15" BORDER="0" ALT=""></a>
         <ul>
           <li><a href="#">en undermeny till</a></li>
           <li><a href="#">en undermeny till</a></li>
         </ul>
       </li>
       <li><a href="#">undermeny 2</a></li>
     </ul>
   </li>
</ul>
</DIV>