• I have a drop down menu on a website that I’m working on at:
    http://www.themortgagesalesblog.com/home/

    The drop down effect doesn’t seem to be working on IE6, but it does work on IE7.

    Here’s what my CSS looks like:

    /* Root = Horizontal, Secondary = Vertical */
    #navmenu-h { background: #000; }
    #navmenu-h li.alignright { float: right; }
    
    ul#navmenu-h
    {
    	margin: 0 0 1em 0;
    	border: 0 none;
    	padding: 0;
    	width: 950px;
    	/*For KHTML*/
    	list-style: none;
    	height: 36px;
    	border-bottom: 1px solid #fc6300;
    }
    
    ul#navmenu-h li
    {
    	margin: 0;
    	border: 0 none;
    	padding: 0;
    	float: left;
    	/*For Gecko*/
    	display: inline;
    	list-style: none;
    	position: relative;
    	height: 36px;
    }
    
    ul#navmenu-h ul
    {
    	margin: 0;
    	border: 0 none;
    	padding: 0;
    	width: 160px;
    	list-style: none;
    	display: none;
    	position: absolute;
    	top: 36px;
    	left: 0;
    	border-left: 1px solid #fc6300;
    	border-right: 1px solid #fc6300;
    	border-bottom: 2px solid #fc6300;
    }
    
    ul#navmenu-h ul:after /*From IE 7 lack of compliance*/
    {
    	clear: both;
    	display: block;
    	font: 1px/0px serif;
    	content: ".";
    	height: 0;
    	visibility: hidden;
    }
    
    ul#navmenu-h ul li
    {
    	width: 160px;
    	float: left;
    	/*For IE 7 lack of compliance*/
    	display: block !important;
    	/*For IE*/
    }
    
    /* Root Menu */
    ul#navmenu-h a
    {
    	padding: 0px 20px 0 20px;
    	float: none !important;
    	/*For Opera*/
    	/*For IE*/
    	display: block;
    	background: #000;
    	color: #ccc;
    	font: 18px/36px Helvetica;
    	text-decoration: none;
    	/*For IE*/
    }
    
    /* Root Menu Hover Persistence */
    ul#navmenu-h a:hover,
    ul#navmenu-h li:hover a,
    ul#navmenu-h li.iehover a
    {
    	background: #333;
    	color: #fc6300;
    }
    
    /* 2nd Menu */
    ul#navmenu-h li:hover li a,
    ul#navmenu-h li.iehover li a
    {
    	float: none;
    	background: #000;
    	color: #ccc;
    }
    
    /* 2nd Menu Hover Persistence */
    ul#navmenu-h li:hover li a:hover,
    ul#navmenu-h li:hover li:hover a,
    ul#navmenu-h li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover a
    {
    	background: #333 url('images/arrow.gif') top left no-repeat;
    	color: #fc6300;
    }
    
    /* 3rd Menu */
    ul#navmenu-h li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li a
    {
    	background: #000;
    	color: #ccc;
    }
    
    /* 3rd Menu Hover Persistence */
    ul#navmenu-h li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover a
    {
    	background: #333;
    	color: #fc6300;
    }
    
    /* 4th Menu */
    ul#navmenu-h li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li a
    {
    	background: #000;
    	color: #ccc;
    }
    
    /* 4th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover a
    {
    	background: #333;
    	color: #fc6300;
    }
    
    /* 5th Menu */
    ul#navmenu-h li:hover li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a
    {
    	background: #000;
    	color: #ccc;
    }
    
    /* 5th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li:hover li:hover li:hover li:hover li:hover a,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover a
    {
    	background: #333;
    	color: #fc6300;
    }
    /* 6th Menu */
    ul#navmenu-h li:hover li:hover li:hover li:hover li:hover li a,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover li a
    {
    	background: #000;
    	color: #ccc;
    }
    
    /* 6th Menu Hover */
    ul#navmenu-h li:hover li:hover li:hover li:hover li:hover li a:hover,
    ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover li a:hover
    {
    	background: #333;
    	color: #fc6300;
    }
    
    ul#navmenu-h ul ul,
    ul#navmenu-h ul ul ul
    {
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 160px;
    }
    
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu-h li:hover ul ul,
    ul#navmenu-h li:hover ul ul ul,
    ul#navmenu-h li:hover ul ul ul ul,
    ul#navmenu-h li:hover ul ul ul ul ul,
    ul#navmenu-h li.iehover ul ul,
    ul#navmenu-h li.iehover ul ul ul,
    ul#navmenu-h li.iehover ul ul ul ul,
    ul#navmenu-h li.iehover ul ul ul ul ul { display: none; }
    ul#navmenu-h li:hover ul,
    ul#navmenu-h ul li:hover ul,
    ul#navmenu-h ul ul li:hover ul,
    ul#navmenu-h ul ul ul li:hover ul,
    ul#navmenu-h ul ul ul ul li:hover ul,
    ul#navmenu-h li.iehover ul,
    ul#navmenu-h ul li.iehover ul,
    ul#navmenu-h ul ul li.iehover ul,
    ul#navmenu-h ul ul ul li.iehover ul,
    ul#navmenu-h ul ul ul ul li.iehover ul { display: block; }
    
    ul li.current_page_item
    {
    	 background: #d0d76f;
    }

    Any help would be greatly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Drop down not working in IE6’ is closed to new replies.