Background
In web sites there is a need to use many submenus under the Main menus due to vast categories of content, so by considering this requirement I have written this article to demonstrate how to create nested dynamic submenus using CSS which all browsers support.
Let's start by creating a website as:
- Start - All Programs - Microsoft Visual Studio 2010
- File - New Website - C# - Empty website (to avoid adding a master page)
- Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
- Then right-click on Solution Explorer - Add New Item - Default.aspx page
Open the source view and use the list tag to create the Menu and Submenu. The source code <body> tag should be as in the following:
<bodybgcolor="#c0c0c0">
<form id="form2" runat="server">
<ulid="Ul1"> // for horizontal Main Menu Tab
<li><ahref="#" title ="Homepage" class="selected">About Us</a ></li >
<li ><a href ="#" title ="About us">Authors</ a ></li > //for submenu
<li ><a href ="#" title ="Projects">Articles</a >
<ul>
<li ><a href ="#" title="Older projects">Older Articles</a > //for submenu
<ul>
<li> <a href ="#" title ="">ASP.Net </ a ></ li >// for Nested subemenu and <a> tag is used to URL address
<li> <a href ="#" title ="">Silverlight</a ></ li >
<li> <a href ="#" title ="">Ajax</a ></ li >
</ ul >
</ li >
<li> <a href ="#" title ="Active projects">New Articles</a > //for submenu
<ul>
<li> <a href ="" title ="Excel FIle">File Upload</a ></ li > // for Nested subemenu
<li> <a href ="" title ="ConvertNoToString">Convert Number</a ></li >
<li> <a href ="" title ="Stored Procedure">Stored Procedure</a ></ li >
</ ul >
</ li >
</ ul >
</ li >
<li> <a href ="#" title ="Contact">Contact Us</a ></ li >
</ul >
</form>
</body>
In the above source code the <li> tag is used to create a horizontal Main Menu and the <ul> list tag is used to create the submenu, again under the <ul> used and another <ul> tag to create a nested submenu.
Applying effects to the Menu using CSS
To apply the effects to the menu use the following CSS classes:
#menu, #menu ul /*for main menu *\
{
list-style:none;
padding:0;
margin:0;
}
/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul
{
display:block;
}
#menu li:hover ul ul, #menu li.over ul ul
{
display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul
{
display:block;
}
/* for mouse hover */
#menu a:hover
{
background-color:#5798B4;
color:#fff;
}
Now run the application which looks such as in the following image:
Advantages
- There is no use of JavaScript code.
- Supported by all browsers.
Note
In the above source code the <a> tag is used to navigate the menu by specifying the URL address into the href property, so I hope that you have specified the URL. For more source code download the zip file of the sample application.