Sticky Top Nav SharePoint 2010

Navigation in SharePoint is definitely a branding pain point. The code improved with 2010, but it was still missing something.

Selected Parent with Drop Down

When you have a parent item selected, it keeps the selected state as you hover over the child links in the drop down.

Hovered Parent Item with Drop Down

Now when you hover over another parent item the hover state is removed once you move to the drop down and hover over a child item. This is what the out of the box navigation lacks.

A Little Help from a Friend

A while back I worked with Marc Anderson on this same issue for a client site, but that branding solution used tables for the navigation. Marc helped me with the same issue, this time the branding solution was using an unordered list (SharePoint:ASPMenu control was set to use simple rendering).

Note: to read more about using simple rendering in SharePoint 2010 navigation – check out Randy’s blog post.

Marc came up with a nice little piece of jQuery that adds a class to the parent tag while the user is hovering over a child item in the drop down.

Add the following script to your custom master page.

Note: Make sure you to add a reference to your js files.  You can find a great blog post on Marc’s site, providing all the links you need.

<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src=""></script>
<script type="text/javascript">

      function() {
      function() {

Next just add the “sticky” class and styles to your custom CSS file.

Credit and Thank You to Marc Anderson for this solution and for always lending a helping hand. (

Thanks for reading.

, , , , , , ,