Modifying top navigation through CSS

Question

How much room do I have to change the top navigation in SharePoint?
I have a publishing site and I am using SharePoint's default top navigation which I have modified a little (by applying CSS) but now I want some more changes as below.

Please check if this is possible to do or not?

In my top navigation there are three levels:

Main Link
|
------Sub link 1
| |
| -----------Sub link a
| |
| -----------Sub link b
|
------Sub link 2

When you mouse over "Main Link" it opens level 1 which shows "Sub link1" and "Sub link2".
When you mouse over "Sub link 1" then it shows level 2 "Sub link a" and "Sub link b".

I want to show a different style bullet on level 1 and level 2. They are basically images (small icons) which will be displayed in level 1 and level2 with each item. But again the thing is, icon of level 1 is different than icon of level 2.

Is this possible?

EDIT
I am using custom master page not the ones provided by SharePoint.

Answer 1

I found this tutorial and looks like it is quite possible. http://kogzee.wordpress.com/2013/08/07/style-sharepoint-2013-top-navigation-global-navigation-menu/

EDIT
The above article explains how you can integrate your custom menu with SharePoint in 2 easy steps.
Suppose you have got the CSS and HTML of menu from designer and now as a SharePoint developer you want to integrate it. Here's how CSS and HTML file will look like:

CSS
The CSS is pretty large so I am only pasting small portion of it. You can see rest of it on the link above.

/*Navigation*/
.crom-Navigation {
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    margin: 10px 0px; 
    top: 0px; 
    position: relative;
    z-index:200;
}
.crom-Navigation a {
    margin: 0px; 
    padding: 0px; 
    border: 0px;
    text-decoration:none;
}
.crom-Navigation ul {
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    font-size: 16px; 
    z-index:200;
    border-bottom: 2px solid #003f5f;
}

HTML

<!--Menu-->
   <div id="navigation" class="crom-Navigation">
   <ul>
      <li><a href="#">Cameras</a>
         <ul>
            <li><a href="#">Camcorders</a></li>
            <li><a href="#">Digital cameras</a></li>
            <li><a href="#">Disposable cameras</a></li>
            <li><a href="#">Film cameras</a></li>
         </ul>
      </li>
      <li><a href="#">Computers</a>
         <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Netbooks</a></li>
            <li><a href="#">Tablets</a></li>
         </ul>
      </li>
      <li><a href="#">Media</a>
         <ul>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">TV shows </a></li>
            <li><a href="#">Video games </a></li>
         </ul>
      </li>
   </ul>
</div>

Now simply do the following steps and the menu will be displayed.

Call that custom CSS in your master page

<SharePoint:CssRegistration
  name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/CromwellFixedWidth/CromwellFixedWidthStyle.css %&gt;"
  runat="server"
  after="SharepointCssFile"/>

Copy/Paste following code in your master page where you want to display menu

<!--Menu-->
   <div id="navigation" class="crom-Navigation">
   <!--Top Menu-->
   <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
                ShowStartingNode="False"
                SiteMapProvider="SPNavigationProvider"
                id="topSiteMap"
                runat="server"
                StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
        <SharePoint:AspMenu
            runat="server" UseSeparateCss="false"
            AdjustForShowStartingNode="False" StaticDisplayLevels="2"
            AccessKey="1" SkipLinkText="" EnableViewState="False"
            MaximumDynamicDisplayLevels="1" 
            DataSourceID="topSiteMap" Orientation="Horizontal"
            RenderingMode="List"
            UseSimpleRendering="False"
            ID="TopNavigationMenu">
            </SharePoint:AspMenu>
    </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>

Answer 2

You need to set following properties to provide custom CSS to Menu Item otherwise they won’t be picked up by SharePoint ASP Menu Control

1. UseSimpleRendering = False

2. RenderingMode = List

reference Link