CSS code only works fine with chrome

[needs_upgrade]

Hello guys!

 

I've just tried this someone else's CSS code. It is about pop-up navigation. It works fine with chrome but not with firefox and IE. Only the first child nav is shown. Any insight/suggestion? Thanks!

 

Here are the codes:

 

/* RULES FOR THE "MENUDIV" OBJECT */


/* An absolutely positioned and hidden DIV (treated as a layer in NS4). */
.menudiv {
position: absolute;
visibility: hidden;
z-index: 1000;
border: 2px outset #FFFFCC;
/* Borders:     Top    Right  Bottom    Left   */
border-color: #FFFFCC #666633 #666633 #FFFFCC;
background-color: #CCCC99;
/* layer-background-color is non-standard and NS4 only. */
layer-background-color: #CCCC99;
padding: 5px;
font: 14px/22px Arial, Helvetica, sans-serif;
/* Here's a cool effect, try uncommenting this, althought it's non-standard: */
/* filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8 */
}


/* Formatting to apply to the elements inside the "menudiv" class elements. */
/* Of course, you can put whatever you want within the menu divs, these are just examples. */

.menudiv .header {
width: 100%;
font-weight: bold;
text-align: center;
border-bottom: 2px dashed #999966;
margin-bottom: 5px;
}

.menudiv a {
display: block;
/* I've specified borders for each side individually so NS4 ignores this setting */
border-top: 1px solid #CCCC99;
border-right: 1px solid #CCCC99;
border-bottom: 1px solid #CCCC99;
border-left: 1px solid #CCCC99;
color: #003333;
text-indent: 5px;
text-decoration: none;
}

/* I'm using :hover and :active pseudo-classes for link mouse effects. */
.menudiv a:hover {
border: 1px solid #336699;
border-color: #6699CC #003366 #003366 #6699CC;
background-color: #336699;
color: #FFFFFF;
}
.menudiv a:active {
border: 1px solid #003366;
border-color: #000000 #3366CC #3366CC #000000;
background-color: #003366;
color: #FFFFFF;
}

/*
The script will automatically assign a class of "highlighted" to elements that currently
have an active submenu, so here's a little CSS to format links within a .menudiv element.
*/
.menudiv .highlighted {
background-color: #336699;
border-color: #336699;
color: #FFFFFF;
}

/* The links in the upper-left that pop out 'divMenu' menus. */
.trigger a {
font: Bold 14px Arial, Helvetica, sans-serif;
color: #003366;
text-decoration: none;
}

/* Likewise, style active trigger links */
.trigger a.highlighted {
color: #CC9966;
}

 

/* All <ul> tags in the menu including the first level */
.menulist, .menulist ul {
margin: 0;
padding: 1px;
width: 150px;
list-style: none;
background: #F0F0F8 url(listmenu_o.png) left repeat-y;
border: 1px solid #CDCDCD;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */
.menulist ul {
display: none;
position: absolute;
top: 0;
left: 150px;
}

/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */
.menulist li {
border: 1px solid #CDCDCD;
position: relative;
font-size: 11px;
}

/* Links inside the menu */
.menulist li a {
display: block;
padding: 1px 3px 1px 3px;
color: #000;
text-decoration: none;
border: 1px solid transparent;
margin: 0
}
/* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */
* html .menulist li a {
border-width: 0;
margin: 1px;
}

.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
color: #FFF;
background-color: #220066;
padding: 1px 3px 1px 3px;
border: 1px solid #ADF;
margin: 0;
}
.menulist a.highlighted {
color: #FFF;
background-color: #440099;
border: 1px solid #CDE;
margin: 0;
}

/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.menulist a .subind {
float: right;
}

*:first-child+html .menulist li {
float: left;
width: 100%;
}

* html .menulist li {
float: left;
height: 1%;
}
* html .menulist a {
height: 1%;
}
/* End Hacks */

[cssfreakie]

do you have an online example of this?

 

Also I would encourage not to use css hacks, They lead just like this code to unexpected results. Use conditional comments instead. Besides that code for Firefox, and adjust for other browsers.

As for a better and cleaner menu, have a look at the suckerfish menu. It's the best in the industry.

[needs_upgrade]

Thanks cssfreakie!