#main-nav   {
    height: 30px; /* set to the height you want your menu to be */
    margin: 10px 0 10px 0; /* just to give some spacing */
    max-width:500px;
    float:right;
}
#main-nav ul    {
    margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#main-nav li    {
    display: block;
    float: left;
    line-height: 30px; /* this should be the same as your #main-nav height */
    height: 30px; /* this should be the same as your #main-nav height */
    margin: 0; padding: 0; /* only needed if you don't have a reset */
    position: relative; /* this is needed in order to position sub menus */
}
#main-nav li a  {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    color: #555555
}
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
    color: #fff;
    background: #03b7b0;
    border-radius:5px;
}
#main-nav ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute;
    top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
    z-index:999;
}
#main-nav ul ul li { /* this targets all submenu items */
    float: none; /* overwriting our float up above */
    width: 250px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
#main-nav ul ul li a { /* target all sub menu item links */
    padding: 5px 10px; /* give our sub menu links a nice button feel */
    height:auto;
    background:#fff;
}
#main-nav ul ul .current_page_item a {
    color:#03b7b0;
    background:#fff;
}
#main-nav ul ul li a:hover {
    color:#03b7b0;
    background:#fff;
}
#main-nav ul li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
}