Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    Suckerfish - strange behavior

    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:
    Code:
    #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:
    Code:
    <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>
    Last edited by 194673; 12-28-2007 at 11:50 AM.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    bump

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I think we need a link to your web page so we can see how it is(n't) working.

    bazz


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •