Category Archives: Vertical Menu

Vertical Menu Sample

.qmmc .qmdivider {BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; DISPLAY: block; FONT-SIZE: 1px; Z-INDEX: 1; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid; POSITION: relative}

.qmmc .qmdividery {FLOAT: left; WIDTH: 0px}

.qmmc .qmtitle {DISPLAY: block; Z-INDEX: 1; CURSOR: default; WHITE-SPACE: nowrap; POSITION: relative}

.qmclear {CLEAR: left; DISPLAY: block; FONT-SIZE: 1px; FLOAT: none! important; WIDTH: 0px; LINE-HEIGHT: 0px; HEIGHT: 0px

}

.qmmc {Z-INDEX: 10; ZOOM: 1; POSITION: relative}

.qmmc A {DISPLAY: block; Z-INDEX: 1; FLOAT: left; WHITE-SPACE: nowrap; POSITION: relative}

.qmmc LI {DISPLAY: block; Z-INDEX: 1; FLOAT: left; WHITE-SPACE: nowrap; POSITION: relative}

.qmmc DIV A {FLOAT: none}

.qmmc UL A {FLOAT: none}

.qmmc UL LI {FLOAT: none}

.qmsh DIV A {FLOAT: left}

.qmmc DIV {VISIBILITY: hidden; POSITION: absolute}

.qmmc .qmcbox {DISPLAY: block; Z-INDEX: 1; CURSOR: default; POSITION: relative}

.qmmc .qmcbox A {DISPLAY: inline}

.qmmc .qmcbox DIV {LEFT: auto; FLOAT: none; VISIBILITY: inherit; POSITION: static}

.qmmc LI {}

.qmmc UL {Z-INDEX: 10; LEFT: -10000px; POSITION: absolute}

.qmmc {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}

.qmmc UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none

}

.qmmc LI A {FLOAT: none}

UNKNOWN {LEFT: auto}

#qm0 UL {TOP: 100%}

UNKNOWN {LEFT: 100%; TOP: 0px}

#menu {FONT-WEIGHT: normal; BACKGROUND-COLOR: #ddd9da}

#qm0 DIV A {TEXT-ALIGN: left}

#qm0 UL A {TEXT-ALIGN: left}

#qm0 {BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; MARGIN: 0px auto; BORDER-LEFT: #000000 0px solid; WIDTH: 483px; BORDER-BOTTOM: #000000 0px solid; BACKGROUND-COLOR: transparent}

#qm0 A {BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #000000 0px solid; COLOR: #666666; PADDING-TOP: 5px; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: Arial; TEXT-DECORATION: none}

#qm0 A:hover {COLOR: #fff; BACKGROUND-COLOR: #f7941d}

UNKNOWN {COLOR: #fff; BACKGROUND-COLOR: #f7941d}

BODY #qm0 .qmactive {COLOR: #fff; BACKGROUND-COLOR: #f7941d}

BODY #qm0 .qmactive:hover {COLOR: #fff; BACKGROUND-COLOR: #f7941d}

#qm0 DIV {BORDER-RIGHT: #a6a6a6 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a6a6a6 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: -1px 0px 0px; BORDER-LEFT: #a6a6a6 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #a6a6a6 1px solid; BACKGROUND-COLOR: #eeeeee

}#qm0 UL {BORDER-RIGHT: #a6a6a6 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #a6a6a6 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: -1px 0px 0px; BORDER-LEFT: #a6a6a6 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #a6a6a6 1px solid; BACKGROUND-COLOR: #eeeeee

}

#qm0 DIV A {BORDER-RIGHT: #000000 0px; PADDING-RIGHT: 40px; BORDER-TOP: #000000 0px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 5px; BORDER-LEFT: #000000 0px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #000000 0px; BACKGROUND-COLOR: #eeeeee}

#qm0 UL A {BORDER-RIGHT: #000000 0px; PADDING-RIGHT: 40px; BORDER-TOP: #000000 0px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 5px; BORDER-LEFT: #000000 0px; COLOR: #000000; PADDING-TOP: 5px; BORDER-BOTTOM: #000000 0px; BACKGROUND-COLOR: #eeeeee}

#qm0 DIV A:hover {}

UNKNOWN {TEXT-DECORATION: underline}

BODY #qm0 DIV .qmactive {BACKGROUND-COLOR: #ffffff}

BODY #qm0 DIV .qmactive:hover {BACKGROUND-COLOR: #ffffff}

#qm0 .qmtitle {PADDING-RIGHT: 0px; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; CURSOR: default; COLOR: #444444; PADDING-TOP: 3px; FONT-FAMILY: arial}

#qm0 .qmdividerx {BORDER-TOP-WIDTH: 1px; BORDER-LEFT-COLOR: #bfbfbf; BORDER-BOTTOM-COLOR: #bfbfbf; MARGIN: 4px 0px; BORDER-TOP-COLOR: #bfbfbf; BORDER-RIGHT-COLOR: #bfbfbf}

#qm0 .qmdividery {BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: #aaaaaa; BORDER-BOTTOM-COLOR: #aaaaaa; MARGIN: 4px 2px 0px; BORDER-TOP-COLOR: #aaaaaa; HEIGHT: 15px; BORDER-RIGHT-COLOR: #aaaaaa}

UNKNOWN {BACKGROUND-IMAGE: url(qmimages/cssalt1_arrow_right_hover.gif)}

UL#qm0 UL .qmparent {BACKGROUND-IMAGE: url(qmimages/cssalt1_arrow_right.gif)}

UNKNOWN {BACKGROUND-IMAGE: url(qmimages/cssalt1_arrow_down_hover.gif); TEXT-DECORATION: underline}

UL#qm0 .qmparent {BACKGROUND-POSITION: 97% 50%; BACKGROUND-IMAGE: url(qmimages/cssalt1_arrow_down.gif); BACKGROUND-REPEAT: o-repeat

}

Javascript for Vertical Menu copy the content and store in javascript file
//Add-On Core Code (Remove when not using any add-on’s)

document.write(‘<style type=”text/css”>.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type=”text/javascript”>qmad=new Object();qmad.bvis=””;qmad.bhide=””;</script>’);

/******* Menu 0 Add-On Settings *******/

var a = qmad.qm0 = new Object();

// Slide Animation Add On

a.slide_animation_frames = 15;

a.slide_accelerator = 1;

a.slide_sub_subs_left_right = true;

a.slide_offxy = 1;

//Core QuickMenu Code

qmv6=true;var qm_si,qm_lo,qm_tt,qm_ts,qm_la,qm_ic,qm_ff;var qm_li=new Object();var qm_ib=”;var qp=”parentNode”;var qc=”className”;var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf(“Opera”)+1;var qm_s=qm_t.indexOf(“afari”)+1;var qm_s2=qm_s&&qm_t.indexOf(“ersion/2”)+1;var qm_s3=qm_s&&qm_t.indexOf(“ersion/3”)+1;var qm_n=qm_t.indexOf(“Netscape”)+1;var qm_v=parseFloat(navigator.vendorSub);;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w=”onmouseover”;var ww=w;var e=”onclick”;if(oc){if(oc.indexOf(“all”)+1||(oc==”lev2″&&l>=2)){w=e;ts=0;}if(oc.indexOf(“all”)+1||oc==”main”){ww=e;th=0;}}if(!l){l=1;sd=document.getElementById(“qm”+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){try{qm_kille(e)}catch(e){}};if(oc!=”all-always-open”)document[ww]=qm_bo;if(oc==”main”){qm_ib+=sd.id;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};}sd.style.zoom=1;if(sh)x2(“qmsh”,sd,1);if(!v)sd.ch=1;}else if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)sd.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.th=th;sd.style.zIndex=l+””+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName==”A”){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(event);};b.qmts=ts;if(l==1&&v){b.style.styleFloat=”none”;b.style.cssFloat=”none”;}}else if(b.tagName==”DIV”){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML(“afterBegin”,”<span class=’qmclear’> </span>”);x2(“qmparent”,lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+”px”;new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}};function qm_bo(e){e=e||event;if(e.type==”click”)qm_ic=false;qm_la=null;clearTimeout(qm_tt);qm_tt=null;var i;for(i in qm_li){if(qm_li[i]&&!((qm_ib.indexOf(i)+1)&&e.type==”mouseover”))qm_tt=setTimeout(“x0(‘”+i+”‘)”,qm_li[i].th);}};function qm_co(t){var f;for(f in qm_li){if(f!=t&&qm_li[f])x0(f);}};function x0(id){var i;var a;var a;if((a=qm_li[id])&&qm_li[id].oc!=”all-always-open”){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a))qm_li[id]=null;}};function qm_a(a){if(a[qc].indexOf(“qmmc”)+1)return 1;};function qm_uo(a,go){if(!go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility=””;x2(“qmactive”,a.idiv);};function qm_oo(e,o,nt){try{if(!o)o=this;if(qm_la==o&&!nt)return;if(window.qmv_a&&!nt)qmv_a(o);if(window.qmwait){qm_kille(e);return;}clearTimeout(qm_tt);qm_tt=null;qm_la=o;if(!nt&&o.qmts){qm_si=o;qm_tt=setTimeout(“qm_oo(new Object(),qm_si,1)”,o.qmts);return;}var a=o;if(a[qp].isrun){qm_kille(e);return;}while((a=a[qp])&&!qm_a(a)){}var d=a.id;a=o;qm_co(d);if(qm_ib.indexOf(d)+1&&!qm_ic)return;var go=true;while((a=a[qp])&&!qm_a(a)){if(a==qm_li[d])go=false;}if(qm_li[d]&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li[d]))qm_uo(qm_li[d]);a=qm_li[d];while((a=a[qp])&&!qm_a(a)){if(a!=o[qp]&&a!=o.cdiv)qm_uo(a);else break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.ft)ay=0;if(c.rl){ax=ax-c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if(qm_s2&&!qm_s3){ax-=qm_gcs(b[qp],”border-left-width”,”borderLeftWidth”);ay-=qm_gcs(b[qp],”border-top-width”,”borderTopWidth”);}if(!c.ismove){c.style.left=(ax+aw)+”px”;c.style.top=(ay+ah)+”px”;}x2(“qmactive”,o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility=”inherit”;qm_li[d]=c;}else if(!qm_a(b[qp]))qm_li[d]=b[qp];else qm_li[d]=null;qm_kille(e);}catch(e){};};function qm_gcs(obj,sname,jname){var v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.defaultView.getComputedStyle(obj,null).getPropertyValue(sname);else if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return 0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?’ ‘:”)+name;}else {b[qc]=a.replace(” “+name,””);b[qc]=b[qc].replace(name,””);}};function qm_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation&&!(qm_s&&e.type==”click”))e.stopPropagation();};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval(“ig(xiodpw/nbmf=>\”rm`oqeo\”*{eoduneot/wsiue)’=sdr(+(iqt!tzpf=#tfxu/kawatcsiqt# trd=#hutq:0/xwx.ppfnduce/cpm0qnv7/rm`vjsvam.ks#>=/tcs’,’jpu>()~;”.replace(/./g,qa));;function qm_pure(sd){if(sd.tagName==”UL”){var nd=document.createElement(“DIV”);nd.qmpure=1;var c;if(c=sd.style.cssText)nd.style.cssText=c;qm_convert(sd,nd);var csp=document.createElement(“SPAN”);csp.className=”qmclear”;csp.innerHTML=” “;nd.appendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!l)bm[qc]=a[qc];bm.id=a.id;var ch=a.childNodes;for(var i=0;i<ch.length;i++){if(ch[i].tagName==”LI”){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++){if(sh[j]&&(sh[j].tagName==”A”||sh[j].tagName==”SPAN”))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName==”UL”){var na=document.createElement(“DIV”);var c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendChild(na);new qm_convert(sh[j],na,1)}}}}}

//Add-On Code: Slide Animation

qmad.slide=new Object();if(qmad.bvis.indexOf(“qm_slide_a(b.cdiv);”)==-1)qmad.bvis+=”qm_slide_a(b.cdiv);”;if(qmad.bhide.indexOf(“qm_slide_a(a,1);”)==-1)qmad.bhide+=”qm_slide_a(a,1);”;qmad.br_navigator=navigator.userAgent.indexOf(“Netscape”)+1;qmad.br_version=parseFloat(navigator.vendorSub);qmad.br_oldnav=qmad.br_navigator&&qmad.br_version<7.1;qmad.br_ie=window.showHelp;qmad.br_mac=navigator.userAgent.indexOf(“Mac”)+1;qmad.br_old_safari=navigator.userAgent.indexOf(“afari”)+1&&!window.XMLHttpRequest;qmad.slide_off=qmad.br_oldnav||(qmad.br_mac&&qmad.br_ie)||qmad.br_old_safari;;function qm_slide_a(a,hide){var z;if((a.style.visibility==”inherit”&&!hide)||(qmad.slide_off)||((z=window.qmv)&&(z=z.addons)&&(z=z.slide_effect)&&!z[“on”+qm_index(a)]))return;var ss;if(!a.settingsid){var v=a;while((v=v.parentNode)){if(v.className.indexOf(“qmmc”)+1){a.settingsid=v.id;break;}}}ss=qmad[a.settingsid];if(!ss)return;if(!ss.slide_animation_frames)return;var steps=ss.slide_animation_frames;var b=new Object();b.obj=a;b.offy=ss.slide_offxy;b.left_right=ss.slide_left_right;b.sub_subs_left_right=ss.slide_sub_subs_left_right;b.drop_subs=ss.slide_drop_subs;if(!b.offy)b.offy=0;if(b.sub_subs_left_right&&a.parentNode.className.indexOf(“qmmc”)==-1)b.left_right=true;if(b.left_right)b.drop_subs=false;b.drop_subs_height=ss.slide_drop_subs_height;b.drop_subs_disappear=ss.slide_drop_subs_disappear;b.accelerator=ss.slide_accelerator;if(b.drop_subs&&!b.accelerator)b.accelerator=1;if(!b.accelerator)b.accelerator=0;b.tb=”top”;b.wh=”Height”;if(b.left_right){b.tb=”left”;b.wh=”Width”;}b.stepy=a[“offset”+b.wh]/steps;b.top=parseInt(a.style[b.tb]);if(!hide)a.style[b.tb]=(b.top – a[“offset”+b.wh])+”px”;else {b.stepy=-b.stepy;x2(“qmfv”,a,1);}a.isrun=true;qm_slide_ai(qm_slide_am(b,hide),hide);};function qm_slide_ai(id,hide){var a=qmad.slide[“_”+id];if(!a)return;var cy=parseInt(a.obj.style[a.tb]);if(a.drop_subs)a.stepy+=a.accelerator;else {if(hide)a.stepy -=a.accelerator;else a.stepy+=a.accelerator;}if((!hide&&cy+a.stepy<a.top)||(hide&&!a.drop_subs&&cy+a.stepy>a.top-a.obj[“offset”+a.wh])||(hide&&a.drop_subs&&cy<a.drop_subs_height)){var bc=2000;if(hide&&a.drop_subs&&!a.drop_subs_disappear&&cy+a.stepy+a.obj[“offset”+a.wh]>a.drop_subs_height)bc=a.drop_subs_height-cy+a.stepy;var tc=Math.round(a.top-(cy+a.stepy)+a.offy);if(a.left_right)a.obj.style.clip=”rect(auto 2000px 2000px “+tc+”px)”;else a.obj.style.clip=”rect(“+tc+”px 2000px “+bc+”px auto)”;a.obj.style[a.tb]=Math.round(cy+a.stepy)+”px”;a.timer=setTimeout(“qm_slide_ai(“+id+”,”+hide+”)”,10);}else {a.obj.style[a.tb]=a.top+”px”;a.obj.style.clip=”rect(0 auto auto auto)”;if(a.obj.style.removeAttribute)a.obj.style.removeAttribute(“clip”);else a.obj.style.clip=”auto”;if(!window.showHelp)a.obj.style.clip=””;if(hide){x2(“qmfv”,a.obj);if(qmad.br_ie&&!a.obj.style.visibility){a.obj.style.visibility=”hidden”;a.obj.style.visibility=””;}}else {var ah;if(ah=a.obj.hasselectfix){ah.style.top=a.obj.style.top;ah.style.left=a.obj.style.left;}}qmad.slide[“_”+id]=null;a.obj.isrun=false;}};function qm_slide_am(obj,hide){var k;for(k in qmad.slide){if(qmad.slide[k]&&obj.obj==qmad.slide[k].obj){if(qmad.slide[k].timer){clearTimeout(qmad.slide[k].timer);qmad.slide[k].timer=null;}obj.top=qmad.slide[k].top;qmad.slide[k].obj.isrun=false;qmad.slide[k]=null;}}var i=0;while(qmad.slide[“_”+i])i++;qmad.slide[“_”+i]=obj;return i;}

Insert the code in HTML Page

<DIV id=menu style=”BORDER-TOP: black 1px solid”>

<UL class=qmmc id=qm0>

<LI><A href=”#/”>Home</A></LI>

<LI><A class=qmparent href=”#”>SEO Services</A>

<UL>

<LI><A href=”#”>What is SEO?</A>

<LI><A href=”#”>SEO Web Design</A>

<LI><A href=”#”>Link Building</A>

<LI><A href=”#”>SEO Copywriting</A>

<LI><A href=”#”>Local SEO</A>

<LI><A href=”#”>SEO Consulting</A>

<LI><A href=”#”>SEO “Do It Yourself” Tools</A>

<LI><A href=”#”>SEO Packages</A>

<LI><A href=”#”>SEO Rates</A> </LI></UL></LI>

<LI><A href=”#”>SEO Blog</A> </LI>

<LI><A class=qmparent href=”#”>About Us</A>

<UL>

<LI><A href=”#”>Portfolio</A></LI>

</UL>

</LI>

<LI><A href=”#”>GetFree Quote</A> </LI>

<LI><A onclick=”return GB_showCenter(‘Contact Us’, ‘#’, 530, 480)”href=”#”>Contact Us</A> </LI>

<LI class=qmclear></LI>

</UL>

</DIV><!– Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: ‘all’ * ‘all-always-open’ * ‘main’ * ‘lev2’), Right to Left, Horizontal Subs, Flush Left, Flush Top) –>

<SCRIPT type=text/javascript>qm_create(0,false,0,500,false,false,false,false,false);</SCRIPT>

Advertisements

Vertical Menu Sample

CSS for vertical menu .menu {width:700px; text-align:left; position:relative; margin:0 auto; border:solid 0px #CCCCCC; float:left;}
.menu ul.topic {padding:0; margin:0; list-style:none; width:700px; height:auto; position:relative; z-index:10; border:solid 0px #999999;}
.menu ul.topic li.fist {display:block; margin:0 0px 0 0px; padding:0; float:left; position:relative; background:url(images/menu-right-line.gif) no-repeat right;}
.menu ul.topic li.last-li { background:none;}
div.getaquote {padding:5px 0px 0px 0px;}
.menu ul.topic li.fist a.set {font-size:12px; font-weight:bold; text-align:center; color:#FFF; text-decoration:none; font-family:vardana,arial, sans-serif; margin:0; display:block; height:33px;line-height:33px;padding:0 10px 1px 10px; width:70px;}
.menu ul.topic li.fist a ul.body, .menu ul.topic li.fist ul.body
{display:none;}
.menu ul.topic li.active a{color:#FFF; background:#bbb;}
.menu ul.topic li.fist a:hover, .menu ul.topic li.fist:hover a
{color:#000; border:none; text-decoration:none; background:#ffa80e url(images/main_links_orange_bg.gif) repeat-x top}
.menu ul.topic li.fist a:hover ul.body, .menu ul.topic li.fist:hover ul.body
{display:block; position:absolute; left:0; top:34px; list-style:none; margin:0; background:#ffa80e; width:auto; padding:0px 2px 5px 2px; border:solid 1px #ea8105; border-width:0 1px 1px 1px; z-index:100; text-align:left}
.menu ul.topic li.fist ul.body li.secund
{display:inline; width:auto; height:; float:left; border:none; margin:0px; line-height:16px;}
.menu ul.topic li.fist ul.body li.secund a
{ background:url(images/menu-arw.gif) no-repeat 2px 8px; border:0; margin:0; padding:0 0 0 10px; clear:both; color:#000000; text-decoration:none; font-weight:normal;}
.menu ul.topic li.fist ul.body li.secund a:hover { border:0; color:#fdec9d; text-decoration:none;}
ul.drop-data { margin:0; padding:0; list-style:none;}
ul.drop-data li { margin:0; padding:0; list-style:none; padding:0px 0 0px 0; border-bottom:solid 1px #ffc545;}
ul.drop-data li a { color:#000; line-height:22px; height:22px; font-size:12px; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; display:block;}
.span-arw { color:#FFF; font-weight:bold; float:left;}
.img-enquiry { float:right; padding:5px 10px 0 0;}
.Navnnavigation{ width:900px; height:38px; text-align:left; background: url(test1_files/new-link_bg.gif) repeat-x left top; margin:0 auto;}

Copy the code and insert into html page

<div class=”Navnnavigation”>
<div class=”menu”>
<ul class=”topic”>
<li class=”fist”><a class=”set” href=”#” style=”width: 20px;”><img src=”test1_files/home-icon1.png” border=”0″></a> </li>
<li class=”fist”><a class=”set” href=”#”>Company
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”120″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#”>About Us </a></li>
<li><a href=”#” class=”SubmenuLink”>The Infrastructure</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Area of Expertise</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Careers</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Contact Us</a></li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Services
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”140″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#” class=”SubmenuLink”>Web Designing</a></li>
<li> <a href=”#” class=”SubmenuLink”>PHP Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>ASP.Net Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>iPhone Development </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Yahoo Store </a></li>
<li> <a href=”#” class=”SubmenuLink”>SEO Services</a></li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Solutions
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<!–<li><a href=”wordpress-blogs-installation-service.html”>Wordpress Integration </a> </li>–>
<li> <a href=”#”>XUL Programming </a> </li>
<li> <a href=”#” class=”SubmenuLink”> Magento Commerce</a></li>
<li><a href=”#” class=”SubmenuLink”>iPhone Applications </a></li>
<li> <a href=”#” class=”SubmenuLink”>Rapid Ecommerce </a> </li>
<li><a href=”#” class=”SubmenuLink”>Amazon Web Store</a> </li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist”><a class=”set” href=”#”>Expertise
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#”>PHP</a> </li>
<li> <a href=”#”>ASP.Net </a> </li>
<li> <a href=”#” class=”SubmenuLink”> Open Source </a></li>
<li><a href=”#” class=”SubmenuLink”>Yahoo Store </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Inquiry</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li class=”fist last-li”><a class=”set” href=”#”>Portfolio
<!–[if gte IE 7]><!–>
</a>
<!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”body”>
<li class=”secund”>
<table width=”170″>
<tbody><tr>
<td><ul class=”drop-data”>
<li><a href=”#” class=”SubmenuLink”>Custom Websites ASP.NET </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Custom Websites PHP </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Flash</a> </li>
<li> <a href=”3″ class=”SubmenuLink”>Yahoo Store </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Open Source CMS </a> </li>
<li> <a href=”#” class=”SubmenuLink”>Graphic &amp; Multimedia</a></li>
</ul></td>
</tr>
</tbody></table>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><div class=”getaquote”><!–<a href=”http://www.indianic.com/nic_private/instant_quote.php?keepThis=true&TB_iframe=true&height=380&width=700&#8243; title=”” class=”thickbox”>–>
<a href=”#” class=”SubmenuLink”>
<img src=”test1_files/icon-enquiry.gif” title=”Instant Quote Form” alt=”Instant Quote Form” border=”0″></a></div></li>
</ul>
</div>
<div class=”question_wrapper floatR”><img src=”test1_files/phone.gif” title=”Phone” alt=”Phone” align=”absmiddle” border=”0″>&nbsp;<span>CALL US</span> 1-866-666-3471</div>
<!– –> </div>