Reset the styling of the rollover of the items:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
    background-color:red;
}

Reset the styling of background of the item arrow:

.ms-topNavFlyOuts td{   

    background-color:white;
}

Reset the styling of the background of the items:

.ms-topNavFlyOuts{
    background-color:white;
}
To reset the arrow of the menuitems with a second niveau of items, see heathers blog:
http://heathersolomon.com/blog/archive/2009/02/09/Modifying-the-second-level-navigation-arrow-image.aspx

So, all together:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
    background-color:red;
}

.ms-topNavFlyOutsHover a:link,
.ms-topNavFlyOutsHover a:visited,
.ms-topNavFlyOutsHover a:hover{
    color:white !important;
}

.ms-topNavFlyOuts a:link,
.ms-topNavFlyOuts a:visited{
    color:red;
}

.ms-topNavFlyOuts td,
.ms-topNavFlyOuts{
    background-color:white;
}

The border that comes around the whole flyout area still has a blue border. This is
set on the classname of the .zz1_TopNavigationMenu. Every flyout menu has it’s own
classname, but in that classname is a ID-number. You will never know which numbers
will be used, since you do not know how many menu items there are. For example:

.zz1_TopNavigationMenu_8 {Default.aspx (line 28)
    background-color:#F2F3F4;
    border:1px solid #A7B4CE;
}

But when you look closer, you see that beside this classname, every flyout area has
the same classname, that is zz1_TopNavigationMenu_0. So, styling the border of the
flyout menu, will be done by changing the border of this classname. Like this:

div.zz1_TopNavigationMenu_0{
    border:1px red solid;
}

Do check the flyout menu on a listpage, and double check if the list header is not
visible on top the the flyout menu. if so, check
this blog post.

That’s all folks!