tamilgirl77
08-08-2005, 07:00 PM
I am using following css and javascript to develop an drop down menu. Each drop down menu has just one background image set as background for the <ul> list tag. The links on the menu is written on top of the image. My problem is with the following code I can use only upto 5 or 6 buttons, but my menu systems has 8 major buttons at the top. I have to use menu for all the buttons which should be aligned horizontally at the top. Any suggestions on where I going wrong would be great.
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 1;
}
#nav a {
font-weight: bold;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-family: Arial, Helvetica;
font-size:12px;
color: white;
}
#nav li li a:hover {
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
font-size:10px;
padding-left:10px;
width:196px;
height:219px;
}
li>ul {
top:auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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;
//--><!]]></script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style=" width:1024; height:728 ">
<div id="content">
<ul id="nav">
<li id="first" style="left:25px; width:160px">
<div><a href=""><img src='images/button1.gif' border="0" /></a></div>
<ul style="background: url(images/button1_background.gif) no-repeat; ">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
<li style="left:-28px; width:160px; ">
<div style=""><a href=""><img src="images/button2.gif" border="0"/></a></div>
<ul style="background: url(images/button2_background.gif) no-repeat;">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
<li id="last" style="left:-90px; width:160px; ">
<div><a href=""><img src="images/button3.gif" border="0" /></a></div>
<ul style="background: url(images/button3_background.gif) no-repeat; ">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
.
.
.
.
.
</ul>
</div>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 1;
}
#nav a {
font-weight: bold;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-family: Arial, Helvetica;
font-size:12px;
color: white;
}
#nav li li a:hover {
}
li {
float: left;
position: relative;
width: 10em;
text-align: left;
cursor: default;
background-color: white;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
font-size:10px;
padding-left:10px;
width:196px;
height:219px;
}
li>ul {
top:auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
hr {
display: none;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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;
//--><!]]></script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style=" width:1024; height:728 ">
<div id="content">
<ul id="nav">
<li id="first" style="left:25px; width:160px">
<div><a href=""><img src='images/button1.gif' border="0" /></a></div>
<ul style="background: url(images/button1_background.gif) no-repeat; ">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
<li style="left:-28px; width:160px; ">
<div style=""><a href=""><img src="images/button2.gif" border="0"/></a></div>
<ul style="background: url(images/button2_background.gif) no-repeat;">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
<li id="last" style="left:-90px; width:160px; ">
<div><a href=""><img src="images/button3.gif" border="0" /></a></div>
<ul style="background: url(images/button3_background.gif) no-repeat; ">
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
<li><a href="">Link4</a></li>
</ul>
</li>
.
.
.
.
.
</ul>
</div>