i created a drop down menu in the following manner and its coming like horizontal menu with vertical sub menu.What i want is horizontal menu with horizontal sub menu can anybody can help me..here am attaching my cuurent code..
menu.html
<html>
<head>
<LINK
href="menu.css" rel=stylesheet>
<LINK href="menu.css" type=text/css
rel=stylesheet>
</head>
<body>
<SCRIPT language=JavaScript
src="menu.js"></SCRIPT>
<UL id=dmenu>
<LI class=topmenulifirst><A class=topmenutitle
href="index.htm">Home</A></LI>
<LI class=topmenuli><A class=topmenutitle
href="javascript:;">About Us</A>
<UL class=submenuul>
<LI class=submenuli><A
href="#">Our Strategy</A>
<LI class=submenuli><A
href="#">Our Business</A>
<LI class=submenuli><A
href="#">Global Network</A>
<LI class=submenuli><A
href="#">Quality Assurance</A>
<LI class=submenuli><A
href="#">Awards And Recognition</A>
</LI></UL></LI>
<LI class=topmenuli><A class="topmenutitle"
href="javascript:;">Working With Us</A>
<UL class=submenuul>
<LI class=submenuli><A
href="salesenquiry.asp">Sales Enquiry</A>
<LI class=submenuli><A
href="customercare.asp">Customer Care</A>
<LI class=submenuli><A
href="jobenquiry.asp">Job Enquiry</A>
<LI class=submenuli><A
href="newssubscription.asp">News Subscription</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle
href="newsclientview.asp">News Room</A> </LI>
<LI class=topmenuli><A class="topmenutitle "
href="javascript:;">Investor Zone</A>
<UL class=submenuul>
<LI class=submenuli><A
href="announceclientview.asp">Company Announcement</A>
<LI class=submenuli><A
href="#">Financial Report</A>
<LI class=submenuli><A
href="#">Analytical Report</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle
href="#">Online Ordering</A> </LI>
</LI></UL>
</body>
</html>menu.css
.topmenuul {
PADDING-RIGHT: 25px; PADDING-LEFT: 1px; PADDING-BOTTOM: 100px; MARGIN: 1px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
.topmenuli {
FLOAT: left; LIST-STYLE-TYPE: none; BACKGROUND-COLOR: #D5D5D5; WIDTH: 159px; font:"Trebuchet MS"
}
.topmenulifirst {
FLOAT: left; LIST-STYLE-TYPE: none; BACKGROUND-COLOR: #D5D5D5 ; WIDTH: 165px; font:"Trebuchet MS"
}
.topmenuli A:hover {
color:#FF0000
}
.topmenulifirst A:hover {
color:#FF0000
}
.submenuul {
PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 1px; PADDING-TOP: 1px; LIST-STYLE-TYPE: none; POSITION: absolute; TEXT-ALIGN: left
}
.submenuli A {
DISPLAY: block; WIDTH: 150px; font:"Trebuchet MS"; font-size:11px
}
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}
UL {
MARGIN-LEFT:
}
UNKNOWN {
LEFT: auto; TOP: auto
}
#content {
CLEAR: left
}
#dmenu {
FONT-SIZE: 11px; FONT-FAMILY: Garamond; color:#000000
}
.topmenutitle {
PADDING-RIGHT: 35px; DISPLAY: block; PADDING-BOTTOM: 4px; COLOR: #444548; TEXT-INDENT: 0.2cm; LINE-HEIGHT: 5px; PADDING-TOP: 10px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
.submenuul {
BACKGROUND-POSITION: right 50%; BORDER-TOP: #ffffff 1px solid; MARGIN-TOP: -1px; BORDER-LEFT: #ffffff 1px solid; BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #dcdcdc
}
.submenuli A {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: #444548; PADDING-TOP: 3px; TEXT-DECORATION: none
}
.submenuli A:hover {
color:#FF0000
}
BODY{
FONT-FAMILY:verdana;
font-size:12px;
background-color: #F2F2F2;
}startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("dmenu");
//alert(navRoot.childNodes.length);
for (i=0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;This is my code to create the dropdown menu plz answer me asps..