button.vervelend
{
   /* Begin positie van de button */
   position: absolute;
   left: 100px;
   top: 100px;
   /* Formaat van de button */
   height: 50px;
   width: 250px;
   /* Uiterlijk van de button */
   background-color: #FFFF00;
   border: 3px solid #FF0000;
   /* Tekst van de button */
   font-family: arial;
   font-weight: bold;
   color: #000000;
}

.categorie
{
   /* Positie */
   float: left;
   /* Opmaak */
   background-color: #CBDEA8;
   border: 1px solid #CBDEA8;
}

.categorie > h1
{
   width: 100%;
   text-align: center
}

.subcategorie
{
   float: left;
   background-color: #FFFFFF;
}

.categorie, .subcategorie, .item
{
   /* Afmeting. ALS JE WIDTH VERANDERT, MOET JE OOK 'left' AANPASSEN IN '.item' */
   width: 15em;
}

.subcategorie > li
{
   position: relative;
}

.subcategorie > li:hover
{
   background-color: #CBDEA8;
}

.item
{
   background-color: #CBDEA8;
   display: none;
   position: absolute;
   top: 0em;
   left: 15em;
}

.subcategorie, .item
{
   /* Lijst */
   /* Padding alleen aanpassen als je bullets wil zien in je submenuus.*/
   /* Dan moet je list-style-type weglaten en padding veranderen in    */
   /* padding-left: 1em oid.                                           */
   list-style-type: none;
   margin: 0em;
   padding: 0em;
}

.subcategorie > li, .item > li
{
   padding-left: 1em;
   padding-right: 1em;
}

.subcategorie li:hover .item
{
   display: block;
   z-index: 666;
}

.subcategorie > li > ul > li
{
   /*background-color: #FF0000;*/
   list-style-type: disc;
   padding-left: 0em;
   margin-left: 1em;
}

.spatie
{
   float: left;
   width: 1em;
}
