Click here to Skip to main content
15,892,927 members
Articles / Web Development / CSS

Horizontal Submenu with Horizontal Menu using CSS Friendly Menu Control Adapter in C#

Rate me:
Please Sign up or sign in to vote.
4.81/5 (51 votes)
27 Jun 2016CPOL4 min read 212.5K   6.9K   81  
Rendering horizontal submenu with horizontal submenu by ASP.NET menu control using CSS friendly menu adapter from a scratch in .NET with C#
/* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
/* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */ 
/* See WhitePaper.aspx for details. */
#navtop{background-color:#f9f9f9; width:100%; height:32px;}
ul.AspNet-Menu 
{
   
}


ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;

}

ul.AspNet-Menu li
{
    list-style: none;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
   display: none;    
}

/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li:hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul
{
    display: none;
}

/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    display: block;
}

/* -------------------------------------------------------------------------- */
/* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Horizontal. This allows us to force the top tier of the menu to layout */
/* horizontally, whereas all subsequent tiers of the menu lay out vertically. */

.AspNet-Menu-Horizontal ul.AspNet-Menu li
{
    float: left;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: left;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I have 5 year+ experience on ASP.NET, ASP.NET Web API, MVC, C#, SQL Server 2005, 2008, NopCommerce, E-commerce, , Windows Phone, LINQ2SQL, Entity Framework, LINQ2XML, ADO.NET, Telerik/RadControls, XHTML, XML, JavaScript, Jquery, Jquery Mobile, Ajax, HTML5 and CSS3.
I have significant knowledge on Java, JavaEE, EJB, JPA, JSF, Spring MVC, Hibernate, Design Pattern and problem domain analysis.

Comments and Discussions