Hello everyone,

I have a strange bug in my css drop down menu.

On firefox, everything is fine. The problem comes on internet explorer. If my page dosen't have any content, the menu work very well. If I add any content, the bug start. I can reach the first child of my menu, but as soon as I put my mouse on the second child the menu disapear. It seams like the portlet get in front of the drop down menu for some reasons..

Here's my CSS's :

#navigation .child-menu {
background:url(../images/custom/navigation_up_bg.png);
height: auto;
overflow: visible;
position: absolute;
top: 25px;
width: 209px;
z-index: 79;
}


.ie #navigation .child-menu{
position:absolute;
left:0px;
top:25px;
margin:0px;
padding:0px;
}

.ie #navigation .child-menu {
height: auto;
}

.ie6 #navigation .child-menu {
height: 1%;
}

#navigation .child-menu ul {
height: auto;
padding-bottom: 2px;
}

#navigation .child-menu ul,
#navigation .child-menu li,
#navigation .child-menu a {
background: transparent none;
}


#navigation .child-menu ul,
#navigation .child-menu li {
float: none;
}

#navigation .child-menu li {
border: none;
display: block;
}

#navigation .child-menu li a {
colorFFFFFF;
display: block;
padding: 10 20px;
width: auto;
margin-top:-1.5px;

}

#navigation .child-menu a:hover {
background:url(../images/custom/navigation_hover_bg.png);
width:125px;
border:1px solid black;
colorfff
}

#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{
display:block;
width:150px;
}


Thanks everyone !

I think your z-index is too low. I have seen liferay using values of at least 200.

That's what I tought first but it's actualy working on Firefox so it's not a z-index prob :s

Fixed !

.ie #navigation {
position:relative;
z-index:9997;
}

Thanks google !

hi,

just include the below code in custom.css file
then it will work fine

.ie #navigation .child-menu {
zoom:1;
}


For any help feel free to contact me,

Raja

i have the same problem and suggested solutions do not work for me. I can not access the elements at the bottom of the menu in internet explorer 8. do you have any ideas?

Hello,
Is your problem also occuring in firefox?. If so, use firebug to change z-order etc. until you find the problem. If it is only a problem in ie, then you could try using the web developer tools (I think they are built into ie8?).
If that doesn't help, try cutting down thee html/css into a small self contianed illustration of the example, and post the html/css.
Good luck.

sorry for the late reply. menu works fine in firefox and i have already assigned z-index values to the html entities. i see the z-index values when i inspect the html file with developer tool bar in ie8.

as i know drop down menus coded as lists using <ul> and <li> have this problem in internet explorer. the way i deal with error is using javascript on hovers or onmuseover/onmouseout events.

does anybody know another way to do this in liferay, or any suggestions.

Thanks.

If you know how to fix it with javascript then you can make yourself a custom theme in the SDK. change the navigation.vm in the custom theme to have the javascript you use.

Hello Hasan,

I came across a simular problem. I fixed it by setting a new zindex with jQuery in the document.ready fase.

You can do something like this in your javascript.js of your theme:

function setNewZIndexNavigation()
{
var zIndexNumberNav = 9990;
jQuery('div#navigation li').each(function() {
jQuery(this).css('zIndex', zIndexNumberNav);
zIndexNumberNav -= 5;
});
}

jQuery(document).ready(
function() {
setNewZIndexNavigation();
}
);


You reindex the navigation structure by doing this. It should work for all browsers.

Good Luck,
Maarten
Pantheon Automatisering

thanks Marten. Your code works ok as i tried.

hi Marten, I am also facing the same problem with IE7. The drop down menu hides behind the
form elements and disappears when the menu item is tried to be select.

I could not understand how to use your code in javascript.js. Whether the complete
code is to be put in javascript.js Or the following partial code to be inserted in some other file.

jQuery(document).ready(
function() {
setNewZIndexNavigation();
}
);

I have a similar problem, playing around with the classic theme in 6.0.5. - in all browsers.

I tried increasing z-index of:

#navigation .child-menu
#navigation .child-menu li
#navigation .child-menu li a

Because the navigation drop down menu is underneath the tabs in the portlets.

But in the debugger, z-index for "#navigation .child-menu li a" still shows as "auto". As a result ".aui-tab-active" in portlet menus falls over the navigation drop-down menus.

Any suggestions?

That worked for me too.