SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Pop Out Menu Doesnt work in IE 6

    I can't even count the number of websites with pop out sub menus and i have never run into this problem.

    i have a list type navigation that has a sub menu in it. i have it styled in CSS and am using a :hover on my list item to display my sub menu. i also have a javascript running for IE to add a class name of hover to the list Item when moused over.

    the sub menu is absolutely positioned in the relatively positioned list item. so when you mouse over the list item it makes the UL display:block;

    This is all simple stuff but for some reason it will not wok in IE 6 and under, and it has me stumped. Can someone please take a look, maybe i missed something.

    the website is:
    http://www.avallo.com/test/polycast
    and the css is:
    http://www.avallo.com/test/polycast/css/default.css

    Please Help!

    Here is the navigation css for a quick referance.
    Code:
    /* =nav
    -----------------------------------------------------------------------------*/
    
    #nav{
    	float:left;
    	width:175px;
    	margin:25px 0 20px 25px;
    	padding:0 0 200px 0;
    	background:url(../images/logoMark.gif) center bottom no-repeat;
    	display:inline; /* <-- IE 6 Double Margin Bug Fix */
    	position:relative;
    }
    #nav ul{
    	list-style:none; 
    	border:1px solid #75a1ce;
    	border-width:1px 0 0 0;
    	background:url(../images/logoMark.gif) center bottom no-repeat;
    	margin:0;
    	padding:0;
    	position:relative;
    }
    #nav ul li{
    	position:relative;
    	display:block;
    	float:left;
    	width:175px;
    }
    #nav ul li a{
    	display:block;
    	padding:0;
    	text-align:left;
    	width:174px;
    	float:left;
    	text-indent:20px;
    	color:#fff;
    	font-size:15px;
    	letter-spacing:1px;
    	background:#1861ae;
    	border:1px solid #75a1ce;
    	border-width:0 0 1px 0;
    	line-height:25px;
    	text-decoration:none;
    }
    #nav ul li a:hover{
    	color:#333;
    	background:#75a1ce;
    }
    #nav ul li ul{
    	display:none;
    	position:absolute;
    	top:-1px;
    	left:169px;
    	padding:0 0 0 5px;
    	margin:0 0 0 0 ;
    	border-width:1px 1px 0 0;
    	list-style:none;
    	z-index:5000; 
    }
    #nav ul li.hover ul,
    #nav ul li:hover ul
    {display:block;}
    
    
    
    #nav ul li ul li a{
    	padding:3px 10px;
    	width:150px;
    	text-indent:0px;
    	border-width:0 0 1px 1px;
    	line-height:18px;
    }
    The HTML:
    HTML Code:
    	<div id="nav">
    		<ul class="clearfix">
    			<li><a href="index.php">Home</a></li>
    			<li><a href="production.php">Production</a>
    				<ul class="clearfix">
    					<li><a href="production.php">Equipment List</a></li>
    					<li><a href="production2.php">90&deg; Presses</a></li>
    					<li><a href="production3.php">Capabilities</a></li>
    				</ul>
    			</li>
    			<li><a href="rim.php">RIM Molding</a></li>
    			<li><a href="#">Materials</a></li>
    			<li><a href="served.php">Industries Served</a></li>
    			<li><a href="about.php">About Us</a></li>
    			<li><a href="iso.php">ISO Certification</a></li>
    			<li><a href="contact.php">Contact Us</a></li>
    		</ul>
    	</div>
    The Javascript:

    Code:
    /* =IE Menu dropdown support
    -----------------------------------------------------------------------------*/
    function listHover() {
    	if (document.all && document.getElementsByTagName) {
    		li = document.getElementsByTagName("li");
    		var x = "hover"
    		for (i in li) {
    			node = li[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function(){this.className=((!empty(this.className)) ? this.className+" "+x : x);}
    				node.onmouseout=function(){this.className=this.className.replace(x, "");}
    			}
    		}
    	}
    }
    
    
    /* =Helper Functions
    -----------------------------------------------------------------------------*/
    function empty(x){	return ((x == '' || x == null) ? true : false);}
    Last edited by westoncansingpun; Sep 26, 2007 at 05:53.


Bookmarks

Posting Permissions

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