.menu
{
    height: 50px;
    margin: 10px 10px;

    background: linear-gradient(135deg,hsl(224deg 93% 17%) 0,hsl(222deg 47% 39%) 12%,#8ca9c6 100%);
    border-radius: 4px;
}

.menu > ul
{
    display:table !important;
    width: 100%;
}

.menu > ul > li
{
    height: 50px;
    cursor: pointer;
    display:table-cell;
    text-align: center;

    background: linear-gradient(to bottom, hsl(10, 100%, 38%) 0%, hsl(9, 100%, 24%) 50%, hsl(10, 100%, 38%) 100%);
    background-repeat: no-repeat;
}

.menu > ul > li > a
{
    position: relative;
    top: 14px;
    text-shadow: 4px 5px 10px rgba(7, 18, 43, 0.38);
}

/*positioning and styling*/
.menu ul
{
    position: relative;
    list-style: none;
    display: inline-block;
}

        .menu ul li a
        {
            font-family: 'Ubuntu Condensed', sans-serif;
            text-decoration: none;
            font-size: 18px;
            color: hsl(0, 0%, 100%);
            white-space: nowrap;
        }

.menu ul ul
{
    background: #f1f1f1;
    border-radius: 0px; padding: 0;
    position: absolute;
    top: 49px;
    z-index: 1000;
    border: 1px solid #aaaaaa;
    border-radius: 1%;
    box-shadow: 0px 0px 20px rgba(10, 10, 10, 0.7);
}
    .menu ul ul li
    {
        float: none;
        position: relative;
        width: 250px;
        height: 30px;
        background-image: linear-gradient(to left, hsl(0, 0%, 94%), hsl(0, 100%, 99%), hsl(210, 100%, 98%));

    }

    .menu ul ul li:before
    {
        content: "";
        display: block;
        height: 1px;
        background-image: linear-gradient(to left, hsl(0, 0%, 94%), hsl(220, 100%, 21%), hsl(0, 0%, 94%));
    }

    .menu ul ul li:hover
    {
        background: linear-gradient(to right, hsl(217deg 100% 83%) 0%,hsl(212deg 100% 93%) 100%);
    }
        .menu ul ul li a
        {
            padding: 8px 17px 6px 7px;
            display: block;
            font-size: 15px;
            font-weight: normal;
            text-align: left;
            color: hsl(220, 100%, 21%); /*blue*/
            text-overflow: ellipsis;
            overflow: hidden;
        }

.menu ul ul ul
{
    position: absolute;
    top: 0;
    left: 100%;
}
    .menu ul ul ul li:hover
    {
        background: linear-gradient(to right, hsl(217deg 100% 83%) 0%,hsl(212deg 100% 93%) 100%);
    }

/*open/close*/
.menu ul ul
{
    display: none;
}

.menu ul li:hover > ul
{
    display: block;
}

.menu .submenu
{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 92%;
}

.menu .submenu > a:hover
{
    background: inherit !important;
}