#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    1
    Rep Power
    0

    Dropdown Menu not working in IE?


    Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why.

    Here's the CSS for the navigation:
    Code:
    #subnav {
    	display: block;
    	margin: 25px 0 0 0;
    	padding:0 0 0 0;
    	width: 196px;
    }
    
    #subnav ul {
    	width: 196px;
    	margin: 0;
    	padding: 0;
    	list-style: none;	
    	font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
    	
    	
    }
    
    #subnav ul ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #subnav ul li {
    	float: left;
    	width: 196px;
    	display: block;
    	height: auto;
    	margin: 0;
    	padding: 0;
    	font-weight: bold;
    }
    
    #subnav ul li a {
    	color: #017490;
    	display: block;
    	width: 100%;
    	height: auto;
    	padding: 10px 0 10px 23px;
    	text-decoration: none;
    	text-shadow: 0px 1px 1px #fff;
    }
    
    #subnav ul li li {
    	padding: 0;
    	margin: 0px 0 0 0;
    }
    
    #subnav ul li li a {
    	padding: 10px 0 10px 5px;
    	line-height: normal;
    	text-shadow: 0px 1px 1px #000;
    }
    
    #subnav ul a.first-level {
    	background: #047691 url(../images/arrow.gif) top right no-repeat;
    }
    
    #subnav ul a.sub-level {
    	background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
    	
    }
    
    #subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
    	/*color: #c7bb98;*/
    	text-decoration: none;
    	background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
    }
    
    #subnav ul ul li:hover, #subnav ul ul li.sfhover {
    	color: #FFF;
    }
    
    #subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
    	color: #FFF
    }
    
    /* This line cancels the highlight effect for all sub-level buttons */
    body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
    	background-image: none
    }
    
    body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
    	color: #048451;
    }
    	
    	#subnav ul li ul { /* second-level lists */
    		position : absolute;
    		left: -999em;
    		z-index: 9999;
    		margin-left : 215px;
    		margin-top : -32px;
    		padding: 5px 5px 5px 0px;
    		background-color:#047691;
    		text-transform: none!important;
    		border-top-right-radius: 5px;
    		border-bottom-right-radius: 5px;
    		-moz-border-radius-topright: 5px;
    		-moz-border-radius-bottomright: 5px;
    		-moz-box-shadow: 0px 2px 2px #033f4d;
    		-webkit-box-shadow: 0px 2px 2px #033f4d;
    		box-shadow: 0px 2px 2px #033f4d;
    
    	}
    	
    	#subnav ul li ul ul { /* third-and-above-level lists */
    		left: -999em;
    	}
    	
    	/* Normal color */
    	#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a, 
    	#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
    	#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
    		color : #FFF;
    		background: #047691;
    	}
    	
    	/* Hover color */
    	#subnav ul li li a:hover, #subnav ul li li a:active, 
    	#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
    	#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover, 
    	#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover, 
    	#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover, 
    	#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
    	{
    		color : #FFF;
    		background-color: #045669}
    	
    	#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
    		left: -999em;
    	}
    	
    	#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
    		left: auto;
    	}
    The live site is demo2 . abcguide .com
    (Sorry if I'm not supposed to link that.. I'll take it down.. ?)
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Klikster.

    It seem that IE8 doesn't like the "float:left" that was given to "#subnav ul li".

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo