WordPress.org

Ready to get started?Download WordPress

Forums

CSS Drop down not working in IE6 (4 posts)

  1. Maxaud
    Member
    Posted 6 years ago #

    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.

  2. Maxaud
    Member
    Posted 6 years ago #

    bump, anyone?

  3. Cathy Tibbles
    Member
    Posted 6 years ago #

    I'm searching the forums for the same thing - how do I find a written javascript for onhover in ie6?

  4. justincavery
    Member
    Posted 5 years ago #

    ie6 will not display the hover in this type of menu, but you can include some javascript for the css as explained here http://www.htmldog.com/articles/suckerfish/dropdowns/

    or upload a htc file to the server and reference that.

    The tutorial for that can be found at http://www.xs4all.nl/~peterned/csshover.html and you can get the htc file from http://www.xs4all.nl/~peterned/htc/csshover2.htc

Topic Closed

This topic has been closed to new replies.

About this Topic