#nav {
    display: table;
    margin: 0;
    padding: 0;
}
#nav a
{
    display: block;
    width: 100%;
    text-align: center;
}
#nav > li {
    list-style: none;
    /*position: relative;*/
    display: table-cell;
    width: 1%;
}
#nav menu li {
    width: 100%;
    display: block;
    position: relative;
}
#nav menu li a {
    /* better to padding-margin the DIV in the LI itself */
}
#nav menu {
    display: none;
    margin: 0;
    padding: 0;
}
#nav li:hover > menu {
    display: block;
    position:absolute;
    z-index:1000;
}
menu#nav > li:hover > menu {
    /*margin-left: -10px;*/
}
#nav > li menu li menu {
    left: 100%;
    top: -2px;
    white-space: nowrap;
}
#nav li:hover > a,
#nav li:hover {
    /*background-color: #12142E;
    color: #FFFF00;*/
}
#nav li,
#nav li a {
    color:#000;
    text-decoration:none;
}

#nav li[data-level="1"]
{
    background-color: #F1F1D9;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav li[data-level="1"] :hover
{
    background-color: #12142E;
    color: #FFFF00;
}
#nav menu li[data-level="2"]
{
    background-color: #F1F2EA;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav menu li[data-level="2"] :hover
{
    background-color: #12142E;
    color: #FFFF00;
}
#nav menu li[data-level="3"]
{
    background-color: #F1F2EA;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav menu li[data-level="3"] :hover
{
    background-color: #12142E;
    color: #FFFF00;
}