SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: pop up menu

  1. #1
    SitePoint Member phatnugs's Avatar
    Join Date
    Jul 2006
    Location
    Nashvegas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pop up menu

    hi all. I'm having the nagging problem of a css menu not working on IE 6.0. Works fine on the mac. Even with the hacks i've done i can't get it to work. I'm sure it's something simple that i'm missing. Funny thing is i've done it before and it's worked fine. But for some reason this one isn't working. Thanks so much!

    here is the html:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="test.css" type="text/css" media="all" />
    <script type="text/javascript">
       <!--
       menuHover = function() {
    		   var navRoot = document.getElementById("menu").getElementsByTagName("li");
    		   for (var i=0; i<navRoot.length; i++) {
    			   navRoot[i].onmouseover=function() {
    				   this.className+=" menuHover";
    			   }
    			   navRoot[i].onmouseout=function() {
    				   this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
    			   }
    		   }
       }
       if (window.attachEvent) window.attachEvent("onload", menuHover);
       //-->
       </script>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    
    
    	<!--MENU-->
    
    	<div id="menu">
    	<ul>
    <li id="jump"><a href="about.html"></a>
    	<ul>
    	<li><a href="about.html">get soggy</a></li>
    	<li><a href="people.html">dunkers</a></li>
    	<li><a href="links.html">puddlejunk</a></li>
    	</ul>
    
    </li>
    </ul>
    	</div>
    	<!--END MENU-->
    </body>
    </html>
    here is the css:

    Code:
    * html a:hover
    {
    
    }
    /* MENU */ 
    #menu {
    	width: 333px;
    	height: 57px;
    	border-top: 1px solid #6993cc;
    	float: right;
    	}
    #menu ul {
    	width: 174px;
    	height: 40px;
    	margin: 0;
    	padding: 0px 158px 0px 2px; 
    	list-style-type: none; 
    	position: relative;
    	z-index: 1;
    	font-family: Arial, Helvetica, sans-serif;
    	float: right;
    	}
    #menu li {
    	width: 56px;
    	height: 40px; 
    	position: relative;
     	float: left;
    	}
    #menu ul li li {
    	height: 14px;
    	font: Arial, Helvetica, sans-serif;
    	}
    	
    #menu ul li a{
    	display: inline;
    	width: 56px;
    	height: 40px;
    	float: left;
    	position: relative;
    	z-index: 1;
    	}
    
    #menu ul li ul {
    	width: 65px;
    	height: 58px;
    	display: none;
    	padding: 0px;
    	position: absolute;
    	border: 1px solid #6993cc;
    	background-color: #ffffff;
    	z-index: 100;
    	}
    
    #menu ul li:hover ul, #menu ul li.menuHover ul {
    	display: block;
    	top:0;
    	line-height: normal;
    	
    	}
    #menu ul li:hover ul li ul,
    #menu ul li.menuHover ul li ul {
    	display: none;
    	}
    #menu ul li:hover ul li a,
    #menu ul li.menuHover ul li a {
    	display: block;
    	padding: 3px 5px;
    	color: #000033;
    	text-decoration: none;
    	background: none;
    	height: auto;
    	}
    #menu ul li:hover ul li a:hover,
    #menu ul li.menuHover ul li a:hover {
    	background-color: #ffffff;
    	color: #792400;
    	text-decoration: none;
    	}
    #menu ul li ul li {
    	margin-top: 0px;
    	font-size: 10px;
    	}
    
    
    #menu ul li ul li a{	
    	background: none!important;
    	height: auto;
    	width: 56px;
    	float: none;
    	position: relative;
    }
    
    
    
    
    
    
    
    
    
    
    /* JUMP IN ROLLOVER */
    #jump a {
    	background: url(images/jumpin_bt.jpg) no-repeat left top;
    	}
    #jump a:hover,#jump:hover a,#jump.menuHover a {	
    	background: url(images/jumpin_bt_active.jpg);
    	}
    /* END JUMP IN ROLLOVER */
    
    #jump {z-index: 6;}
    
    
    
    /* END MENU */
    --
    Mikey P

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Fort Worth, Texas
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried it in any other browsers? If so, which - and did it work?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure why but increasing the li width here makes it appear in IE.

    Code:
    #menu li {
        width: 59px;
        height: 40px; 
        position: relative;
         float: left;
        }
    #menu ul li li {
        height: 14px;
        font: Arial, Helvetica, sans-serif;
        }
        
    #menu ul li a{
        display: inline;
        width: 56px;
        height: 40px;
        float: left;
        position: relative;
        z-index: 1;
        }
    
    #menu ul li ul {
        width: 65px;
        height: 58px;
        display: none;
        padding: 0px;
        position: absolute;
        border: 1px solid #6993cc;
        background-color: #ffffff;
        z-index: 100;
        left:0;
        }
    You also need the left:0 in the nested ul for IE.


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
  •