/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper1 ul, #menuwrapper1 ul li{
    margin:0;
    padding:0;
    list-style:none;

}

/* We float the li list to the left and apply background color and border right white and set the height to 25px. Note you can ignore the height if you do not want
*/
#menuwrapper1 ul li{
    float:Right;
    background-color:#3A4876;
    border-left:solid 2px white;
    height:18px;
    line-height:18px;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper1 ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper1 ul li a{
    padding:0px 15px;
    font:12px Arial Black;
    color:white;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper1 ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 25px is the menu height.  */
#menuwrapper1 ul li:hover ul{
    left:0;
    top:18px;
    display:block;
    z-index:101;
}

/* As the parent li has float:left property, we overwrite for the submenu (level 2) to float none (normal position)  */
#menuwrapper1 ul li ul li{
    float:none;
    width:170px;
    border:solid 0.5px blue;
    background-color:#3A4876;
    height:22px;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper1 ul li:hover ul li:hover{
    background-color:#6679e9;
}

/* We style the color of level 2 links */
#menuwrapper1 ul li ul li a{
    display:inline-block;
    width:170px;
}

/* ================================= */
#menuwrapper2 ul, #menuwrapper2 ul li{
    margin:0;
    padding:0;
    list-style:none;}

#menuwrapper2 ul li{
    float:Right;
    background-color:#3A4876;
    border-left:solid 2px white;
    height:14px;
    line-height:14px;
}

#menuwrapper2 ul li:hover{
    background-color:#6679e9;
    position:relative;
}

#menuwrapper2 ul li a{
    padding:0px 10px;
    font:12px Arial Black;
    color:white;
    display:inline-block;
    text-decoration:none;
}

/* Clear float */
.clear{
    clear:both;
}