View Full Version : Trouble with adding 2nd list style

Nov 11th, 2009, 09:51 PM
I am using a drop down menu on my site which uses the following code:


/*Menu Start */
ul {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;


ul li {
display: block;
position: relative;
float: left;


li ul { display: none; z-index:9999; }

ul li a {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
display: block;
text-decoration: none;
color: #000000;
border-top: 0px solid #9F9F9F;
padding: 5px 28px 5px 10px;
background: #FFFFFF;
margin-left: 1px;
white-space: nowrap;


ul li a:hover, ul li a.over { background: #c0c1c0; z-index:9999; }

li:hover ul, li.over ul {
display: block;
position: absolute;
li:hover li, li.over li {
float: none;
font-size: 11px;

li:hover a, li.over a { background: #EAEAEA; z-index:9999; color:#000000; }
li:hover li a:hover, li.over li a.over { background: #c0c1c0; z-index:9999; color:#000000; }


<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", "");



<ul id="nav">
<li><a>Collections +</a>
<li><a href="angelina.php">Angelina Collection</a></li>
<li><a href="product2_bridal.php?osCsid=<? echo $osCsid?>">Bridal Collection</a></li>
<li><a href="product2_byzantine.php?osCsid=<? echo $osCsid?>">Byzantine Collection</a></li>
<li><a href="carre.php">Carré Collection</a></li>
<li><a href="product2_dewdrop.php?osCsid=<? echo $osCsid?>">Dew Drop Collection</a></li>
<li><a href="product2_disk.php?osCsid=<? echo $osCsid?>">Disk Collection</a></li>
<li><a href="product2_fleur.php?osCsid=<? echo $osCsid?>">Fleur Collection</a></li>
<li><a href="product2_ice.php?osCsid=<? echo $osCsid?>">Ice Collection</a></li>
<li><a href="product_child.php?osCsid=<? echo $osCsid?>">Children</a></li>
<li><a href="product_life.php?osCsid=<? echo $osCsid?>">Lifesaver</a></li>
<li><a href="product2_men.php?osCsid=<? echo $osCsid?>">Men</a></li>
<li><a href="viewall.php">View All</a></li>

<li><a>Bracelets +</a>
<li><a href="product1_cool.php?osCsid=<? echo $osCsid?>">Cool </a></li>
<li><a href="product1_neutral.php?osCsid=<? echo $osCsid?>">Neutral</a></li>
<li><a href="product1_warm.php?osCsid=<? echo $osCsid?>">Warm</a></li>
<li><a href="product_bracelets.php">View All</a></li>

The problem I am having is that I want to css style a second list on the same page but can't because my css for this is universal for all UL,LI elements. Or at least I think that is the problem.

So I can't seem to figure out how to add a class to these elements as well as integrate it into the javascript.

Your help is always so greatly appreciated!

Nov 11th, 2009, 10:16 PM
Well, for the JS I would try changing everywhere that it says nav and navRoot to nava and navaRoot for the first menu and navb for the second menu. Or you could try changing all of the getElementByIds to getElementByClasss
which might be the better option if it works like that.

I don't know the first thing about Javascript though. Worth a try anyway.

Nov 11th, 2009, 11:29 PM
I dont need the second list style to work with the javascript. I just need it to be styled differently.

I don't know much if anything about javascript either which is the problem I think.

Nov 12th, 2009, 12:19 AM
if you want it to be styled differently simply do

ul#menu-two { /*style */ }
ul#menu-two li { /*style */}

<ul id="menu-two">

Nov 12th, 2009, 06:23 AM
Yeah it looks like the javascript just finds ID="nav" and goes from there. So if you don't want to use the JS for the second list then you shouldn't need to do anything special at all. You can only have one thing with an ID="nav" on the page anyway. Just use new IDs and new classes for your second list and the JS shouldn't be an issue.

Personally I wouldn't recommend having your main navigation menu be dependent on javascript. I think it is a good idea to make sure your site at least won't appear broken if javascript is disabled by a visitor.