/* Section 1: general navigation elements */
nav {
    background-color: #333; /* colour of menu band */
    border: 1px solid #333; /* colour of border outside around the menu band */
    color: #fff; /* ??? */
    display: block;
    margin: 0;
    overflow: hidden;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif; /* font for whole menu */
    font-size: 18px;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    color: #fff; /* colour of text in menu band for menu items that are NOT a link*/
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.3s;
}
/* Section 2: general nested elements */
nav > ul > li > a {
    color: #fff; /* colour of text in menu band for menu items that are a link*/
    display: block;
    line-height: 1.5em; /* height of menu band */
    padding: 0.5em 2em; /* second value: horizontal space between entries in menu band */
    text-decoration: none;

}

nav li > ul{
    font-family: Arial, sans-serif; /* font of first pull down menu */
    font-size: 16px;
    display : none;
    margin-top:1px;
    background-color: #bbb; /* colour of background in first pull down menu */

}

nav li > ul li{
    display: block;
}

nav  li > ul li a {
    color: #111; /* colour of text in first pull down menu */
    display: block;
    line-height: 1.5em; /* height of boxes in first pull down menu */
    padding: 0.5em 2em;
    text-decoration: none;
}
nav li > ul > li ul  {
    display: none;
    background-color: #ccc; /* second level pull down menu */
}
/* Section 3: dynamic effects */
nav li:hover {
    background-color: #666; /* background colour of items in menu band on hover, except for items that have submenu */
}
nav li:hover > ul{
    position:absolute;
    display : block;
}
nav li > ul > li:hover > ul  {
    position:absolute;
    display : block;
    margin-left:100%;
    margin-top:-2.5em; /* vertical position of second level pull down menu */
}
/* Section 4: classes */
nav ul > li.sub{
    background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
}
nav ul > li.sub:hover{
    background-color: #666; /* background colour of items in menu band that have submenu items on hover */
}

nav ul > li.sub li.sub{
    background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
}