Jump to content

IE 6 UL Dropdowns not dropping?! * other browsers fine?

scotchegg78

By scotchegg78
in CSS Help

 Share

Recommended Posts

scotchegg78 Regular Member

scotchegg78

Posted
Posted

HI Guys

 

I am pulling my hairs out over this, for some reason the drop downs in IE 6 are not dropping down?

 

Can anyone spot the reason for this? IE7 , fox etc all seem ok.

 

.menu {
position:relative;
z-index:2;
top:-92px; /* moved up to account for picture drop down extra px */

}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding-top:92px;
margin:0;
list-style-type:none;
}
.menu ul ul {
/*width:150px;*/
text-align:left;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
text-decoration:none; 
color:#fff; 
width:160px;
height:36px;  
/*background:#758279; */

}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:31px;
/*width:120px;*/
}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
/*background:#d4d8bd; */ 
color:#FFF; 
height:auto; 
line-height:1em; 
padding:6px 0px 5px 5px; 
width:96%; /*Menu width */

}



/* style the top level hover */
.menu ul ul a:hover, .menu ul ul a:hover{
color:#000;
background:#ffffff;
filter:alpha(opacity=40);
}
.menu ul ul :hover > a, .menu ul ul :hover > a {
color:#000;
background:#ffffff;
filter:alpha(opacity=40);
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}

#id{
margin:0;

}

.oneLine{
line-height:32px;
}

.twoLine{
line-height:16px;

}

/*Menu 1 */

.gold{
float:left;
position:relative;
width:170px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarLeft.jpg) no-repeat right;
z-index:2;

}
.gold:hover{
float:left;
position:relative;
width:170px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar1.png);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;

}

li.gold ul{
padding-left:0px;
background-image:url(images/Menu/menu1btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:165px;
left:2px;

}

.gold li{
padding-top:0px;
width:165px;/*sets width of list*/
padding-left:0px;
background-color:#DDAF01;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu1li.gif);
background-repeat:no-repeat; 
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
padding-bottom:4px;
}
.gold li a{
width:165px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;

}
/*Menu 2 */
li.bronze ul{
padding-left:0px;
background-image:url(images/Menu/menu1btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:165px;
left:2px;
}

.bronze{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
}

.bronze:hover{
float:left;
position:relative;
width:160px;
height:123px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar2.gif);
display:block;

}
.bronze li{
width:160px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
background-color:#ee7e0d;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
left:2px;/*brings list in*/

}
.bronze li a{
width:160px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
background-color:#ee7e0d;
font-size:10px;
display:block;
position:relative;
left:2px;/*brings list in*/

}

/*Menu 3 green*/

.green{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
z-index:2;

}
.green:hover{
float:left;
position:relative;
width:160px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar3.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;

}

li.green ul{
padding-left:0px;
background-image:url(images/Menu/menu3btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;

}


.green li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#48af53;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu3li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.green li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#48af53;
}

/*Menu 4/purple */
.purple{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right;
z-index:2;

}
.purple:hover{
float:left;
position:relative;
width:160px;
height:128px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar4.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;
}

li.purple ul{
padding-left:0px;
background-image:url(images/Menu/menu4btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.purple li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#ba23e9;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu4li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.purple li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#ba23e9;
}

/*Menu 5/blue */
.blue{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarCentre.jpg) no-repeat right top;
z-index:2;

}
.blue:hover{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar5.gif);
background-position:top;
padding-bottom:2px;
z-index:2;
display:block;
}

li.blue ul{
padding-left:0px;
background-image:url(images/Menu/menu5btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.blue li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#0894d8;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu5li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.blue li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#0894d8;
}

/*Menu 6/ pink */
.pink{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background:url(images/Menu/menubarRight.jpg) no-repeat right top;
z-index:2;
display:block;

}
.pink:hover{
float:left;
position:relative;
width:160px;
height:36px;
text-align:center;
font-size:13px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/Menu/menubar6.jpg);
background-position:top;
padding-bottom:2px;
z-index:2;
}

li.pink ul{
padding-left:0px;
background-image:url(images/Menu/menu6btm.gif);
background-repeat:no-repeat;
background-position:bottom;
height:auto;
top:123px;
padding-top:0px;
padding-bottom:7px;
width:155px;
left:2px;
}


.pink li{
padding-top:0px;
padding-bottom:4px;
width:155px;/*sets width of list*/
padding-left:0px;
background-color:#dc0cac;
font-size:8px;
font-weight:normal;
display:block;
position:relative;
/*brings list inleft:2px;*/
Background-image:url(images/Menu/menu6li.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:0px;
z-index:2;
position:relative;
}
.pink li a{
width:155px;/*sets width of list*/
padding-left:0px;
margin-top:0;
padding-top:0;
/*background-color:#DDAF01;*/
font-size:10px;
display:block;
z-index:2;
background-color:#dc0cac;
}

/***************************************** SUB MENUS **************************************/ 

.submenu{
float:left;
position:relative;
width:179px;
margin:0;
padding:0;

}

#menu_sub_top{
background-image:url(images/Menu/menu_sub_top.gif);
background-position:top left;
background-repeat:no-repeat;
margin:0;
padding:0;
height:15px;
width:180px;
margin-right:5px;
margin-top:5px;
}

#menu_sub_btm{
background-image:url(images/Menu/menu_sub_btm.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:10px;
margin:0;
padding:0;
width:180px;
margin-right:5px;
}

#submenu{
width:180px;
margin-right:5px;
}

#submenu ul{
width:180px;
list-style:none;
font-size:8pt;
text-align:left;
padding-left:0px;
padding-top:0px;
padding-bottom:8px;
background-color:#48af53;
position:relative;
margin:0;
}
#submenu ul li a{
text-decoration:none;
color:white;
padding-left:11px;
}

#submenu ul li{
height:20px;
background-image:url(images/Menu/menu_sub_fil.gif);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:5px;
padding-left:3px;
margin:0;
width:180px;

}
#submenu ul li a:hover{
background-image:url(images/Menu/left_arrow.gif);
background-position:left center;
background-repeat:no-repeat;
padding-left:11px;

}

#submenu ul li a.oneLine{
line-height:16px;
}

 

and sample list..

 

<div class='menu'>
            <ul id='nav'>
<li class='bar oneLine gold'>top list 1

<ul>
<li class=''><a class='oneLine ' href='sub menu 1'>sub menu 1</a></li>
<li class=''><a class='oneLine ' href='sub menu 2'>sub menu 2</a></li>
<li class=''><a class='oneLine ' href='sub menu 3'>sub menu 3</a></li>
</ul>
</li>
<li class='bar oneLine green'>top list 2

<ul>
<li class=''><a class='oneLine ' href='sub menu 1'>sub menu 1</a></li>
...

 

many many thanks for any help with this.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.