Display Top Nav Menu Items on a Second Row In SharePoint 2010 – CSS only option

This blog post is v2 of my first article about accomplishing this task of creating a second top-nav row in SharePoint 2010. That article can be found here: Make Top Nav in SharePoint 2010 display a horizontal line with menu items instead of the fly-out menu. This solution is much easier because it is done completely with CSS. No need to make changes to the master page.

Setup:

To try out these changes you will want to have a CSS file to edit that will make changes to your site. I prefer to have a link to a custom CSS file in the HEAD section of the master page like this:
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/custom.css %>” After=”corev4.css” runat=”server”/>
Another option, if you have a Publishing Site, is you can add an Alternate CSS URL on the Site Master Page Settings page. If your site is not a Publishing site, you can add the settings by having the Publishing Features turned on in both the Site and the Site Collection.

Overview:

With CSS we are going to take the fly-out menus and make them display below the top nav in a horizontal row. First I will show all the the code and then I will describe it below.

CSS Code:

/*set menus under selected items to show*/
.menu .selected ul.dynamic{left:-1px}
/*add positioning and styling to the menus to make them appear as a row*/
.s4-tn ul.dynamic {background-color:#eee; border:transparent none; border-top:1px solid #ccc; height: 19px; padding-left:6px; padding-top:5px; top:25px; width:100%}
/*set position relative on the top nav container*/
.s4-tn{position:relative; height:50px}
/*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}
/*reset the min-width for IE7 and then for other browsers*/
.menu span.dynamic,.menu a.dynamic {min-width:auto; min-width:inherit}

Description:

The first two CSS style modifications above set the position of the fly-out menus and style them to look like a second row and align them under the top nav. The menus are always on the page but are hidden by default by shoving them way of the page. We expose the menu of the selected item by giving it a left value of minus one pixel.
The next two style modifications change the container of the fly-out menus from their normal <LI> parent to the container of the whole top nav bar (s4-tn). This is an important step but might not make sense until you are actually making these changes to your site.
The last thing to do is to make several items display inline that are set to display as block level elements.

That is it.

Feel free to use this code on your projects.