CSS Dropdown Menu for ASP.NET Website
In this article, you will learn how to Create a Drop Down menu using CSS and Plain HTML that can be used in ASP.NET website. This article is complete tutorial for beginners to Create a Nice Dropdown Menu.
Dropdown Menu, as the Name tells, Drop's Down a List in some events.
We are going to learn how to Create a Simple Dropdown menu using HTML/CSS.
We hope, you have little knowledge of HTML and a little of CSS.
First Create a Design for Menus in HTML.
I am just going to show you using UL (Unordered List) and LI (List Item) tag of HTML.
This is my design for Menu.
Lets See code for this Design
<table>
<tr>
<td>Drop Down Menu Example </td>
</tr>
<tr>
<td>
<ul>
<li>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Home"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton2" runat="server" Text="Users"></asp:LinkButton>
<ul>
<li>
<asp:LinkButton ID="LinkButton3" runat="server" Text="Add New User"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton4" runat="server" Text="Add New Employee"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton5" runat="server" Text="Modify Existing Emp"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton6" runat="server" Text="Change Password"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton7" runat="server" Text="View Login Report"></asp:LinkButton>
</li>
</ul>
</li>
<li>
<asp:LinkButton ID="LinkButton8" Text="Courses" runat="server"></asp:LinkButton>
<ul>
<li>
<asp:LinkButton ID="LinkButton9" runat="server" Text="ASP.NET"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton10" runat="server" Text="C# .NET"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton11" runat="server" Text="Java"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton12" runat="server" Text="Ethical Hacking"></asp:LinkButton></li>
</ul>
</li>
<li>
<asp:LinkButton ID="LinkButton13" Text="Projects" runat="server"></asp:LinkButton>
<ul>
<li>
<asp:LinkButton ID="LinkButton14" runat="server" Text="Web Projects"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton15" runat="server" Text="Windows Projects"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton16" runat="server" Text="Linux Projects"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton17" runat="server" Text="Android Apps"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton18" runat="server" Text="iPhone Applications"></asp:LinkButton>
</li>
</ul>
</li>
<li>
<asp:LinkButton ID="LinkButton19" Text="Downloads" runat="server"></asp:LinkButton>
<ul>
<li>
<asp:LinkButton ID="LinkButton20" runat="server" Text="Mobile Application"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton21" runat="server" Text="Computer Application"></asp:LinkButton>
</li>
</ul>
</li>
<li>
<asp:LinkButton ID="LinkButton22" Text="Join Us" runat="server" ToolTip="Utilities for Admins Only."></asp:LinkButton>
<ul>
<li>
<asp:LinkButton ID="LinkButton23" runat="server" ToolTip="As Student" Text="As Student"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton24" runat="server" ToolTip="As Teacher" Text="As Teacher"></asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="LinkButton25" runat="server" ToolTip="As Employee" Text="As Employee"></asp:LinkButton>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
Now lets Design. Come and Create a New File called Stylesheet.css and Lets Open
You can either design using ID or CLASS. You must be familiar with CSS Identifiers. Remember CSS ID begins with # sign and CSS Class begins with . (dot) sign.
I am posting code using CSS ID.
#navMenu {
margin: 0px;
padding: 0px;
}
#navMenu ul { /* Style for the UL */
margin: 0px;
padding: 0px;
line-height: normal;
}
#navMenu li { /* Style for the LI */
margin: 0px;
padding: 2px;
list-style: none;
float: left;
position: relative;
}
#navMenu ul li a { /* Style for the Link Anchor (Hyperlinks) */
margin: 0px;
padding: 0px;
height: auto;
width: 125px;
font-size: 11px;
display: inline-block;
text-decoration: none;
text-align: center;
font-weight: normal;
font-family: Calibri,Tahoma, 'Segoe UI', Verdana;
}
#navMenu ul ul { /* Normally set visibility hidden of Child UL */
visibility: hidden;
position: absolute;
top: 20px;
background-color: Black;
color: White;
font-weight: bold;
}
#navMenu ul li ul li { /* How should Drop Down Items look */
padding-top: 4px;
border: 2px;
color: Black;
font-size: 11px;
border-style: solid;
border-color: #808080;
font-family: Calibri,Tahoma, 'Segoe UI', Verdana;
}
#navMenu ul li:hover ul { /* What to do with Child UL on mouse Hover of Parent LI */
visibility: visible;
color: #f00;
}
Now just apply an ID in above HTML Code.
<tr>
<td id="navMenu"> <!-- Just Apply CSS ID or Class here -->
<ul>
Now Lets see what is output.
I have attached one Another CSS also on This Project files. Just Change CSS ID to Class as below that will give you more better look.
<tr>
<td class="menu">
<ul>
Download Link: Project Source
All the best and Enjoy.
It's a wondweful block of code