.menu, .submenu {
    color: #222;
    display: block;
    list-style-type: none;
}

.menu{
    border-bottom: 1px solid #fc0;
    background-color: #ffe88d;
    font-size: 11px;
    margin: 0;
    padding: 0 2px;
}

.admin-color-blue .menu {
    background-color: #839AAB;
    border-bottom: 1px solid #26318A;
}

.admin-color-green .menu {
    background-color: #bcddbf;
    border-bottom: 1px solid #26318A;
}

.menu > li {
    /* border-right: 1px solid #ffc; */
    cursor: pointer;
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 2px 15px;
    position: relative;
    text-transform: uppercase;
    line-height: 30px!important;
}

.menu > li:hover{
    background-color: #ffdd56; /* transparent; */
    color: #222;
}

.menu > li:hover .submenu
{
    left: 0;
    transition-delay: .25s;
    display: block;
}

.menu > li a {
    font-size: 11px;
    color: #222;
}

.menu > li a {
    color: #222;
    text-decoration: none;
}

.menu > li.last {
    float: right;
    border: 0 none;
}

.submenu {
    display: none;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    text-transform: none;
    transition: all 0s ease;
    z-index: 1000;
}

.submenu li {
    background-color: #ffdd56;
    border: 1px solid #fc0;
    border-width: 0 1px;
    display: block;
    margin: 0;
    padding: 0;
    width: 180px;
}

.submenu li:last-child{
    border-bottom-width: 1px;
}

.submenu li a {
    color: #222;
    display: block;
    font-weight: normal;
    margin: 0;
    padding: 8px;
}

.submenu li a:hover {
    background-color: #fc0;
    text-decoration: none;
}

@media only screen and (max-width: 767px) {
    .menu >  li {
        display: none;
        padding: 10px;
    }

    .menu {
        margin-bottom: 20px;
    }
}