SharePoint 2013 Global Navigation Menu Alignment and Display

Default behavior of Top Navigation menu in sharepoint 2013 was overlaped, and also the menu-arrow were not vertical aligned.

So quick fix for this problem is to add Content Editor WebPart to page and add (Override) CSS classes used by TOp Navigation Menu.

Add below CSS to Content Editor WebPart and it will resolve problem.

<style>
.ms-core-listMenu-horizontalBox .menu-item, .ms-core-listMenu-horizontalBox  

.menu-item .additional-background, .ms-core-listMenu-horizontalBox  

.menu-item .additional-background .menu-item-text { display:block; }
ul.dynamic { min-width:175px; }
span.menu-item-text:hover { 
background-color:rgba(205,230,247,0.5);
padding:2px;
}
span.menu-item-text{ 
padding:2px;
}
</style>