Add below links in header

ASPX Page writes below code where you want to show the Menu

• HOME
• ABOUT US

  • Sample1
  • Sample2
  • Sample3

• SERVICES

  • Sample1
  • Sample2
  • Sample3

Style Sheet

Save file as Cssmenu.css

.horizontalcssmenu ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

/*Top level list items*/

.horizontalcssmenu ul li

{

position: relative;

display: inline;

float: left;

}

/*Top level menu link items style*/

.horizontalcssmenu ul li a

{

display: block;

width: 90px;

/*width: 100px; Width of top level menu link items*/

padding: 4px 10px; /*border: 1px solid #202020;*/

border-left-width: 0;

text-decoration: none;

color: #ffffff;

font: bold 11px verdana;

font-variant: small-caps;

background-color: #757575;

text-align:left;

}

/*Sub level menu*/

.horizontalcssmenu ul li ul

{

left: 0;

top: 0;

border-top: 1px solid #202020;

position: absolute;

display: block;

visibility: hidden;

z-index: 100;

}

/*Sub level menu list items*/

.horizontalcssmenu ul li ul li

{

display: inline;

float: none;

}

/* Sub level menu links style */

.horizontalcssmenu ul li ul li a

{

width: 100px; /*width of sub menu levels*/

font-weight: normal;

padding: 2px 5px;

background: #757575; /* For editing sub menu hover backgroung color */

border-width: 0 1px 1px 1px;

}

.horizontalcssmenu ul li a:hover

{

/* background: white; For editing main menu hover backgroung color */

}

.horizontalcssmenu ul li ul li a:hover

{

background: #F06B00; /* For editing sub menu hover backgroung color */

}

.horizontalcssmenu .arrowdiv

{

position: absolute;

left: 0;

background-image: url(../images/icon.gif);

background-repeat: no-repeat;

background-position:center left;

}

.horizontalcssmenu .arrowdowdiv

{

position: absolute;

left: 0;

background-image: url(../images/icon_down.gif);

background-repeat: no-repeat;

background-position:center left;

}

* html p#iepara

{

/*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/

padding-top: 1em;

}

/* Holly Hack for IE \*/

* html .horizontalcssmenu ul li

{

float: left;

height: 1%;

}

* html .horizontalcssmenu ul li a

{

height: 1%;

}

/* End */

Save file as Hmenu.js

//Horizontal Main Menu

var cssmenuids=["cssmenu1"] //Enter id(s) of CSS Horizontal UL menus, separated by commas

var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

function createcssmenu(){

for (var i=0; i

var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")

for (var t=0; t

ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"

var spanref=document.createElement("span")

spanref.className="arrowdiv"

spanref.innerHTML=" "

ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)

ultags[t].parentNode.onmouseover=function(){

this.style.zIndex=100

this.getElementsByTagName("span")[0].className="arrowdowdiv"

this.getElementsByTagName("ul")[0].style.visibility="visible"

this.getElementsByTagName("ul")[0].style.zIndex=0

}

ultags[t].parentNode.onmouseout=function(){

this.style.zIndex=0

this.getElementsByTagName("span")[0].className="arrowdiv"

this.getElementsByTagName("ul")[0].style.visibility="hidden"

this.getElementsByTagName("ul")[0].style.zIndex=100

}

}

}

}

if (window.addEventListener)

window.addEventListener("load", createcssmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", createcssmenu)