Horizontal orientation fly-out menu with CSS styles

Overview

With CSS we are going to take the fly-out menus and make them display below the top navigation in a horizontal row.

CSS Code

/*set menus under selected items to show*/

.menu LI.selected ul.dynamic{left:0px;width:auto;}

/*add positioning and styling to the menus to make them appear as a row*/

.s4-tn ul.dynamic {background-color: #707C55;padding-left:0px;border:0px;

padding-top:10px; top:30px;width:auto;}

/*set position relative on the top nav container*/

.s4-tn{position:relative; height:auto}

/*make sure that the LI items that contain the menus never get position:relative from corev4.css on hover*/

.s4-tn .menu-horizontal .dynamic-children {position:static;}

/*reset several items to display inline that are have display:block in corev4.css*/

/*.menu span.dynamic,

.menu a.dynamic,*/

.menu LI.dynamic,

.s4-tn LI.dynamic > .menu-item,

.menu .menu-item .additional-background,

.menu .menu-item .additional-background .menu-item-text{display:inline;color:white !important;}

.menu LI.dynamic UL.dynamic li.dynamic{display:block !important;width:auto !important;margin-bottom:5px;

text-decoration:none;}

.menu LI.dynamic UL.dynamic{width:auto;margin-top:20px;margin-left:-120px;display:block;left:-1000px;}

.menu .selected ul.dynamic{position:absolute;}

.s4-tn .menu-horizontal .dynamic-children{position:relative;border:0px;}

.s4-tn li.static > .menu-item{padding-top:4px;}

.menu LI.dynamic a:link,

.menu LI.dynamic a:visited,

.menu LI.dynamic a:active,

.s4-tn LI.dynamic > .menu-item a:link{background-color:transparent !important;text-decoration:none;}

.menu LI.dynamic UL.dynamic UL.dynamic{width:auto;margin-top:0px;margin-left:0px;display:block;

padding-top:3px;/* height:5px;*/vertical-align:middle;}

.menu LI.dynamic UL.dynamic LI.dynamic UL.dynamic{width:auto;margin-top:-2px;margin-left:0px;display:block;

left:-2000px;}

.menu a.dynamic{text-decoration:none !important;}

/*reset the min-width for IE7 and then for other browsers*/

.menu span.dynamic,.menu a.dynamic {min-width:auto; min-width:inherit}

Referred Link: http://blogs.pointbridge.com/Blogs/broweleit_seth/Pages/Post.aspx?_ID=13