...

View Full Version : Suckerfish - strange behavior



194673
12-28-2007, 11:46 AM
Well, I just noticed on my suckerfish dropdown menu, when the page first loads, only the first li will appear (top tier). After I hover over any part of the menu though, all of my li's will appear, and the menu bar will resize accordingly (I believe due to padding). Note: I have only tested in Firefox. Also, when I adjust the z-index on all li's, the menu will appear vertically, instead of horizontally (until hovered over).
Anyways, here's my coding:
CSS:


#navLinks
{
height: 25px;
background: url('images/navUnselected.jpg') repeat-x;
padding: 0px;
margin: 0px;
float: left;
}

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

li
{
float: left;
position: relative;
padding: 0px 5px;
background: url('images/navUnselected.jpg') repeat-x;
height: 100%;
width: 100%;
}

li a
{
font-size: 20px;
text-decoration: none;
}

li a:link, li a:visited
{
color: #F2FFCE;
}

li a:hover
{
color: #004AA5;
}

li:hover, li.over
{
background: url('images/navHover.jpg') repeat-x;
}

li ul
{
display: none;
position: absolute;
top: 25px;
left: 0px;
background-image: none;
z-index: 100;
}

li > ul
{
/*top: auto;*/
/*left: auto;*/
}

li:hover ul, li.over ul
{
display: block;
}

li ul li
{
background-color: #F9DF66;
background-image: none;
}

li span
{
display: block;
color: #004AA5;
}

li ul li:hover, li ul li.over
{
background-color: #AED154;
background-image: none;
}

li ul li a
{
font-size: 14px;
color: #004AA5;
}

li.divider
{
padding: 0px;
}
HTML:

<head>
<script type="javascript">
ieNav = function()
{
if (document.all&&document.getElementById)
{
navMenu = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navMenu.childNodes[i];
if (node.nodeName == "LI")
{
node.onmouseover=function()
{
this.className += " over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload = ieNav;
</script>
</head>
<body>
<div id="navLinks">
<ul id="nav">
<li><a href="menu1.php">menu1</a>
<ul></ul>
</li>
<li class="divider"><img src="images/navDivider.jpg" alt="divider" /></li>
<li><a href="menu2.php">menu2</a>
<ul>
<li><a href="menu2.php?loc=sub1"><span>sub1</span></a></li>
<li><a href="menu2.php?loc=sub2"><span>sub2</span></a></li>
</ul>
</li>
<li class="divider"><img src="images/navDivider.jpg" alt="divider" /></li>
<li><a href="menu3.php">menu3</a>
<ul>
<li><a href="menu3.php?loc=sub1"><span>sub1</span></a></li>
<li><a href="menu3.php?loc=sub2"><span>sub2</span></a></li>
</ul>
</li>
<li class="divider"><img src="images/navDivider.jpg" alt="divider" /></li>
<li><a href="menu3.php">menu3</a>
<ul></ul>
</li>
</ul>
<div class="clearFloat"></div>
</div>
</body>

194673
12-31-2007, 08:11 AM
bump:thumbsup:

bazz
01-03-2008, 08:57 PM
I think we need a link to your web page so we can see how it is(n't) working.

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum