/* Hierarchical dynamic menu with CSS * * Copyright Petr Stanicek [aka -pixy-] 2003-05-16 * * Taken from http://www.pixy.cz/blogg/clanky/csshiermenu/ */ #menu { position:relative; list-style-type:none; margin:0 0 0 0; padding:0; width:100%; height:1.4em; font:100%/1 sans-serif; } .menuitem { position:absolute; top:-14px; margin:0; padding:0; width:10em; height:1.4em; overflow:hidden; } #mi01 { left:16em } #mi02 { left:26em } #mi03 { left:36em } .menuitem ul { display:block; margin: 0; padding:0; list-style-type:none; } .menuitem li { margin:0; padding:0 } .submenu li { position:relative } /* 2-class selector to have higher weight than ".menuitem ul" */ .submenu .subsubmenu { position:absolute; top:0; left:10em; width:10em; display:none; } #menu a,span { display:block; margin:0; padding: 0.2em 0.5em; text-align:center; text-decoration:none; color:white; border-top:1px solid #565F68; border-left:1px solid #565F68; cursor:pointer; } #menu a:hover { background:black } .menuitem span { background:#565F68 } .menuitem ul span { background:#88AA88 } .menuitem ul ul a { background:#AA8888 } .menuitem ul ul ul a { background:violet } .menuitem ul ul ul ul a { background:orange } #menu a,span { border-bottom:none; font-weight:bold; } html { overflow-y:scroll; }