Horizontal CSS Menu IE7 Problem (2nd Child Fails)

[Jarada]

Hey,

I have a problem with a template I have installed called LazyDays. It implements a Horizontal CSS Menu that has a vertical drop-down that's based purely on CSS.

Now it works perfectly in Firefox, and not at all in IE (tested: IE7).

Link: http://chaosindustries.jarada.co.uk/

The 'Corp' link is supposed to drop down and show 'CEO' and 'Members'

I can't for the life of me figure out what's wrong. As requested in initial post, I hearby show you the CSS that makes up this menu. There is also some Javascript but it doesn't fix the problem (It's set to work by conditional commenting only in IE6, and when enabled for all of IE it doesn't fix this problem).

Code: Select all

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper clears the floating elements of the menu */

div#menuwrapper{position:relative;float:right;height: 10px;padding:  0}
div#wrapper{position:relative;float:left;height: 40px;padding:  0}

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li { 
        width: 215px; 
       }


/* Unless you know what you do, do not touch this */ 

#primary-nav{float:right;;
        list-style: none; 
	margin: 0px; 
	padding: 0px;
       }

#primary-nav ul { 
	list-style: none; 
	margin: 0px; 
	padding: 0px; 
	}
#primary-nav ul {
	position: absolute; 
	top: auto; 
	display: none; 
	}
#primary-nav ul ul { 
	margin-top: 1px;
 	margin-left: -1px;
	left: 100%; 
	top: 0px; 
	}
	
#primary-nav li { 
	margin-left: -1px;
	float: left; 
	}
#primary-nav li li { 
	margin-left: 0px;
	margin-top: -1px;
	float: none; 
	position: relative; 
	}

/* Styling the basic apperance of the menu elements */


#primary-nav a { 
  font: 400 1.6em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #FFF;
	display: block; 
	padding: 4px 10px; 
	text-decoration: none; 
	}
#primary-nav li a:hover {color: #65EBFF;

	}
#primary-nav li li a {background-color:#555555; 
	
       	}
#primary-nav li li a:hover {background-color:#444444; 
	
       	}	
#primary-nav li{
        }

#primary-nav li.menuparent { 
	}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {  color: #65EBFF;
  border-top: 5px solid #000; 
	}
#primary-nav li li.menuactive {  color: #65EBFF;
  border-top: 0px solid #000; 
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li .menuparent, #primary-nav ul li .menuparent:hover, #primary-nav ul li .amenuparent { 
	background-image: url(uploads/LazyDays/arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat;
	}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover{
	  color: #65EBFF;
  border-top: 5px solid #000;}
#primary-nav li li:hover{border-top: 0px solid #000;}
#primary-nav li li a:hover{border-top: 0px solid #000;}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul, #primary-nav li.menuparenth ul ul ul { 
	display: none; 
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul, #primary-nav ul ul ul li.menuparenth ul { 
	display: block;border:none; 
	}


/* IE Hacks */

#primary-nav li li { 
	float: left; 
	clear: both; 
	}
#primary-nav li li a { 
	height: 1%; 
	}

Ask if you need anything else. Thank you very much in advance!

[Nullig]

Please post the menu call in your template.

Nullig

[Jarada]

By Menu Call, I presume you mean the Menu Manager code I am using. If that is correct...

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
url}">{$node->menutext}{/foreach}

{repeat string="" times=$node->depth-1}


{/if}

Then here you go

[Kevin C]

I had the same problem, but looking at your CSS mine may have been caused by something else. I made the background of the 2nd and 3rd level menu items semi-transparent using an opacity: 0.9; setting. This worked fine in FF (although the 3rd level menu was more transparent than the 2nd level menu). But with this opacity setting IE7 displayed the 2nd level menu items fine, but never displayed the 3rd level items at all. I used the IE web developer toolbar to see that the html & css was being evaluated, and it had it in the right place, but it was completely transparent (or something).

Originally I had:
/* Set menu elements at second level.  */
#primary-nav li li {
        width: 150px;
        padding: 0 2px;
        background-color:#F9992B; /*level 2 and 3 background */
        filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9; 
      }

but to make it work in IE7 I removed the filter:alpha(opacity=90) and the opacity:0.9 lines, leaving only -moz-opacity:0.9. This gives me transparency in FF only, but at least the items show up in IE7.  I may try to use a PNG image with transparency as the background image instead of a background color to get it working for IE.

[streever]

he means, how you call menu in the TEMPLATE, I think--so the line that says, {menu some paramaters}

[Jarada]

Ah right! Well in that case, here is my Menu Call:

Code: Select all

  <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
  <div id="menu_horiz" >
     <div id="wrapper">
{cms_module module='menumanager' template='LazyDays : lazymenu' }
    </div>
  </div>

[Nullig]

I think the IE Hacks section of your stylesheet should be...

/* IE Hacks */

#primary-nav li li {
_float: left;
_clear: both;
}
#primary-nav li li a {
_height: 1%;
}

Nullig

[Dr.CSS]

It may be the IE JS needs to point to the one in your modules, when it is transfered it puts it in a new folder...





Try...

[Jarada]

Argh, so annoying  Both ideas failed!

You know, Microsoft are one annoying company!

Any other ideas?