Lister som dynamiske menuer - eksempel 4

Retur til artiklen

Stylesheet

body {
  behavior:url("csshover.htc");
}
ul,li,a {
  display:block;
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
}
ul {
  width:100%;
  border:1px solid #9d9da1;
  background:white;
  list-style:none;
}
li {
  position:relative;
  padding:1px;
  padding-left:26px;
  background:url("dokument.gif") no-repeat;
  z-index:9;
}
li.folder	{ 
  background:url("folder.gif") no-repeat; 
}		
li.folder:hover { 
  z-index:10; 
}		
li.folder ul {
  position:absolute;
  display:none;
  left:50px; /* IE - se næste kommentar */
  top:5px;
}		
li.folder>ul { /* Alle andre browsere */
  left:140px; 
}
ul.level1 li.folder:hover ul.level2, 
ul.level2 li.folder:hover ul.level3 {
  display:block;
}
a {
  padding:2px;
  border:1px solid white;
  text-decoration:none;
  color:#1a0080;
  font-weight:bold;
  width:100%; /* IE - se næste kommentar */
}
li>a {        /* Alle andre browsere */
  width:auto;
}

li a.submenu {
  background:url("rarrow.gif") right no-repeat;
}

a:hover {
  border-color:gray;
  background-color:#bbb7c7;
  color:black;
}
li.folder a:hover {
  background-color:#bbb7c7;
}

JavaScript

Download .htc-fil

HTML-koden