CSS drop down menu problem

Discussion in 'Web Design and Development' started by John444, Mar 23, 2011.

  1. John444, Mar 23, 2011
    Last edited by a moderator: Mar 27, 2011

    John444 macrumors member

    Joined:
    Feb 10, 2011
    #1
    Hey everyone, I have made a pure CSS drop down menu for school. I wrote everything by hand. My website works great in Safari, Firefox, and Google Chrome but when a bring it to school to be marked, the drop down menu does not work with Internet Explorer. This is because IE does not support the hover tags. Is there any script or alternative things that I can put in the CSS or HTML document to make it work the same in IE as Safari or Firefox?
    So I need a script that will make the hover tag work in IE, or any alternative tags I can use so that browser like IE will read my CSS menu right.

    Here is the CSS file:
    Code:
    #wrapper {
    	width:940px;
     	margin-left:auto;
    	margin-right:auto;
    }
    
    @charset "utf-8";
    
    #navMenu {
    	margin:0;
    	padding:0;
    
    }
    
    #navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:30px;
    }
    
    #navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background:#999;
    }
    #navMenu ul li a {
    	text-align:center;
    	font-family:"arial", cursive;
    	text-decoration:none;
    	height:30px;
    	width:150px;
    	display:block;
    	color:#FFF;
    	border: 1px solid #000;
    	text-shadow:1px 1px 1px #000;
    }
    
    #navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:32px;
    	
    }
    
    #navMenu ul li:hover ul {
    	visibility:visible;
    
    }
    
    /***********************************************/
    
    #navMenu li:hover {
    	background:#09F;
    
    }
    
    #navMenu ul li:hover ul li a:hover {
    	background:#CCC;
    	color:#000;
    
    }
    
    #navMenu a:hover {
    	color:#000;
    }
    
    .clearFloat {
    	clear:both;
    	margin:0;
    	padding:0;
    
    }
    Any tips would be greatly appreciated.
     
  2. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    Internet Explorer 6 is dying. Some companies, including the one I work for, have already dropped support. Things like this are part of the many reasons it needs to die for the web to move forward.

    For times you absolutely need ie6 support, use whatever hover to get the hover pseudo class to work right in ie6.
     
  3. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4

Share This Page