Code to Add Drop Down Menu in Asp.Net Page

 Code to add drop down menu in Asp.Net Page


code for drop down menu in Asp.Net Page, Drop Down Menu code for asp.net
First of all, go the Visual Studio 2005 or 2008 and create a new website. Now I want to tell here how to create drop-down menu on the page: So I tell you unique and simple code to do it.

1. Go to the HTML section of the form and  (Go to HTML code section page and write the following code in below head tag)

<style>

body{font-family:arial;}

table{font-size:80%;background:black}

a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{

font-size:100%;
position:absolute;
visibility:hidden;
}

</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>


2. step. go to the Body section are and write the following code

<table width="100%">
 <tr bgcolor="#FF8080">
  <td onmouseover="showmenu('Learning')" onmouseout="hidemenu('learning')">

   <a href="default.aspx">Learning</a><br />

   <table class="menu" id="learning" width="120">
   <tr><td class="menu"><a href="default2.aspx">page Name</a></td></tr>
   <tr><td class="menu"><a href="default3.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default4.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default5.aspx">Page Name</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   <a href="default.aspx">Scripting</a><br />
   <table class="menu" id="scripting" width="120">
   <tr><td class="menu"><a href="default6.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default7.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default8.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default9.aspx">page Name</a></td></tr>
   <tr><td class="menu"><a href="default10.aspx">Page Name</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   <a href="default.aspx">Validation</a><br />
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="default11.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default12.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default13.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default14.aspx">Page Name</a></td></tr>
   <tr><td class="menu"><a href="default15.aspx">Page Name</a></td></tr>
   </table>
  </td>
 </tr>
</table>
<p>Now you can see the the option when you mouse over the drop down</p>




Note:  you can change the text value as you want to the drop-down menu. and give the address of your wishing page value of the page as mention here default.aspx.


Now to see the result you come and see the design page, you see here a drop-down menu as you created. 
I wish you all the best for nice and important coding. you can subscribe my site for further update.

by