Styling Current Navigation

Question

I set up current navigation to use flyouts. The first level shows and second level flies out when level 1 is hovered. This works and I am happy with this. What I want to do is to style the links for level 1 such that not all are bold. Currently, level 1
is bold and level 2 is regular. This looked nice before switching to flyouts. I want only level 1 links with a level 2 flyout to be bold. I tried changing the links not having level 2 from a heading to a link. This did not help. SharePoint treats all level
one links the same. I even tried looking for a div or ID that might differentiate the different types of level 1 links and found nothing.
I checked the code and all of the level 1 links are using the style .LeftNav1. Is there any way to add a second CSS style and some conditional code to help SharePoint know which style to use?
Mike

Answer 1

Mike,
The <li> parent of menu items that have a flyout should include a class, .dynamic-children, i.e.
<ul class="static">
<li class="static dynamic-children">
<a class="static dynamic-children selected menu-item" href="#">
link
</a>
<ul class="dynamic" />
</li>
<li class="static"/>
</ul>
Both SP 2010 and 2013 OOTB create a similar nav structure.
Let's look at the following css:
<style>
.menu-item {
font-weight: bold;
.dynamic-children > .menu-item {
font-weight: normal;
</style>
This is saying that all tags with class menu-item should be bold while those menu-item's that have a direct parent that has a class dynamic-children should not be bold. Hopefully you can find a similar parent container class and similar css as above to get
the outcome you require.
Eric Overfield - PixelMill -
ericoverfield.com -
@EricOverfield