﻿/* 1. Fix voor het box-model: borders tellen niet meer mee bij de hoogte */
#sample4 * {
    box-sizing: border-box;
}

#sample4 {
    box-sizing: border-box;
}

/* Hoofdmenu container */
#sample4 { 
    font: normal 14px verdana; 
    margin: 0px; 
    padding: 0px; 
    background: #999999; 
    line-height: 100%; 
    border: solid 1px #999999; 
    float: none; 
    position: relative; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    width: 200px; 
} 

/* Hoofdmenu items */
#sample4 li { 
    margin: 0px 0px -1px 0px; /* -1px voorkomt dubbele borders en extra hoogte tussen items */
    padding: 0px; 
    position: relative; 
    list-style: none; 
} 

/* Hoofdmenu links */
#sample4 a { 
    font-weight: normal; 
    text-decoration: none; 
    color: #000000; 
    display: block; 
    padding: 8px 3px; 
    margin: 0px; 
    background: #e2eefc; 
    border: solid 1px #999999; 
} 

/* Hoofdmenu hovers en actieve staten */
#sample4 a:hover { 
    background: #8cbde1; 
    color: #000000; 
    border: solid 1px #999999; 
    text-decoration: none; 
} 

#sample4 li:hover > a { 
    background: #8cbde1; 
    color: #ffffff; 
    border: solid 1px #999999; 
    text-decoration: none; 
} 

#sample4 .current a { 
    background: #8cbde1; 
    color: #ffffff; 
    border: solid 1px #999999; 
    text-decoration: none; 
} 

/* Reset voor submenu links wanneer de parent gehoverd wordt */
#sample4 li:hover li a { 
    background: none; 
    border: none; 
    color: #000000; 
} 

#sample4 ul li:hover a { 
    background: none; 
    border: none; 
    color: #000000; 
} 

/* Submenu container (dropdown) */
#sample4 ul { 
    display: none; 
    margin: 0px; 
    padding: 0px; 
    width: 270px; 
    position: absolute; 
    top: 0px; 
    left: 138px; 
    background: #f0f0f0; 
    border: solid 1px #666666; 
    z-index: 2; 
} 

#sample4 li:hover > ul { 
    display: block; 
} 

/* Submenu items */
#sample4 ul li { 
    float: none; 
    margin: 0px 0px -1px 0px; /* Ook hier -1px voor de borders */
    padding: 0px; 
    background: #e2eefc; 
} 

/* Submenu links */
#sample4 ul a { 
    font: normal 14px verdana; 
    padding: 8px 20px; 
    text-decoration: none !important; 
    border: solid 1px #697360 !important; 
} 

#sample4 ul a:hover { 
    background: #8cbde1 !important; 
    color: #000000 !important; 
    text-decoration: none !important; 
    border: solid 1px #999999 !important; 
} 

/* Sub-submenu (derde niveau) */
#sample4 ul ul { 
    left: 184px; 
    top: -3px; 
} 

/* Clearfix */
#sample4:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

* html #sample4 { 
    height: 1%; 
}
