Verticaal CSS drop down menu

Voorbeeld verticaal CSS menu

HTML code

<menu>
      <ul id="navmenu">
        <li><a href="../">Begin pagina</a></li>
        <li><a href="#">Aantekeningen        +</a>
          <ul>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Linux</a></li>
            <li><a href="#">Thunderbird</a></li>
            <li><a href="#">Apache PHP webserver</a></li>
            <li><a href="#">Voorbeelden           +</a>
              <ul>
                <li><a href="#">Colums                 +</a>
                  <ul>
                    <li><a href="#">2 kolommen layout</a></li>
                    <li><a href="#">3 kolommen layout</a></li>
                  </ul>
                </li>
                <li><a href="#">PHP Formulier        +</a>
                  <ul>
                    <li><a href="#">PHP Formulier 1</a></li>
                    <li><a href="#">PHP Formulier 2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Semiconductor</a></li>
            <li><a href="#">List of editors</a></li>
          </ul>
        </li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </menu>

CSS code

menu {
	width: 13.5em;
	float: left;
	padding-top: 3em;
}

ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
	margin: 0;
	padding: 0;
	width: 12.3em; /* for khtml */
	list-style: none;
	box-shadow: 10px 10px 10px DarkSlateGray;
	background: linear-gradient(to top, silver 0%, #fff 100%);
}
ul#navmenu ul {border-bottom: 1px solid #000000;}

ul#navmenu:after /*From IE 7 lack of compliance*/{
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#navmenu li {
	float: left; /*For IE 7 lack of compliance*/
	display: block !important; /*For GOOD browsers*/
	display: inline; /*For IE*/
	position: relative;
}

/* Root Menu */
ul#navmenu a {
	padding: 5px;
	display: block;
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
	text-decoration: none;
	height: auto !important;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, gold 0%, #fff 100%); /* IE6, Firefox Bug */
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, gold 0%, #fff 100%);
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, gold 0%, #fff 100%);
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, silver 0%, #fff 100%); /* IE6, Firefix Bug */
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
	color: #000;
	background-color: transparent;
	background: linear-gradient(to top, gold 0%, #fff 100%);
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 12.3em;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
	display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
	display: block;
}