drop down list from collapsing

**mahman10** · 08-01-2006, 08:25 PM

hey guys, another problem i need help on.
i made a drop down list, but everytime you click on a link, the entire menu collapses. what code would i put in to keep the menu from collapsing? and to stay open?

example: I click on "proposal services", 10 links drop down, click on first link, the 10 links submenu collapses back into proposal services. i want to be able to click the first "Link", it'll open that link in another frame, but the 10 Link submenu will still be open instead of collapsing.

here's the html code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Untitled Document</title>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {

if (document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
		node.onclick=function() {
		
this.className = (this.className == "on") ? "off" : "on";

			}
   		}
  	}
 }
}
window.onload=startList;
//--><!]]>
</script>
<style type="text/css">
	@import "sop.css";
</style>

</head>

<body>
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
  	<tr height="10">&nbsp;</tr>
    <td><ul id="nav">
  <li><a href="#"><strong>Home</strong></a></li>

  <li><a href="#"><strong>Proposal Services</strong></a> 
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>

  <li><a href="#"><strong>Creative Services</strong></a> 
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#"><strong>Mutual Services</strong></a> 
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
</ul></td>
  </tr>
</table>
</body>
</html>

and here's the css code:

Code:

a:link,a:active,a:visited { 
	color: #336699;
	text-decoration: none;
} 

a:hover {
	color: #99cc33; 
	text-decoration: none; 
}

body {
	margin-left: 0px;
	margin-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px;
}

.nav1 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	font-weight: bold; 
}

.nav2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-left: 50px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
}

ul li {
	position: relative;
	width: 115px;
	border: 1px solid #ffffff;
}


li ul {
	position: relative;
	display: none;
}

li ul li {
	width:115px;
	border-left:8px solid #003399
}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #99CC33;
	line-height: 2em;
	height: 2em;	
	padding: 0 5px;
}
li li a {background:#ffffff}

/* set dropdown to default */
li:hover li a, li.over li a {
    color: #003399;
    background-color: #ffffff;
}

/* this sets all hovered lists to red */
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
   color: #99CC33;
}

li ul li  {  } /* Sub Menu Styles */
 li.on ul { display:block  } /* The magic */
 li.off ul{display:none}

Thanks!

Thread: drop down list from collapsing

Thread Tools

Search Thread

drop down list from collapsing

Bookmarks

Bookmarks

Posting Permissions