| Home | Register | FAQ | Members List | Search | Today's Posts | Mark Forums Read |
| DesignersTalk > Dropdown menu hidden behind the content in IE6 |
|
LinkBack | Thread Tools | Search this Thread |
|
|
#1 (permalink) |
|
Registered User
Join Date: Feb 2010
Posts: 2
|
Dropdown menu hidden behind the content in IE6
Can anyone please help me to display the dropdown menu above the content. as of now the dropdown menu is hidden behind the page content in IE6. i tried to change the z-index property.but in vain.its an urgent requirememt!! PLEASE HELP!!!! Last edited by neha_saas : 25-02-2010 at 02:04. |
|
|
|
|
|
#4 (permalink) |
|
Registered User
Join Date: Feb 2010
Posts: 2
|
Thank u for the help,i tried it with z-index and position.it still doesnt work. Below is the dropdown.css file. ul,ol,li{list-style-type:none; margin:0px; padding:0px;} .topmenuwrapper{width:100%; height:26px; position:relative;z-index:0} #menu {padding:0; margin:0 ; list-style:none; height:26px; position:relative; z-index:10000; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; padding:0 0px; font-weight:normal;} #menu li {float:left; margin-right:1px; background:url(topnav_bg_link.gif) repeat-x left top;} #menu li a {display:block; float:left; height:26px; line-height:26px; ; color:#18347d; text-decoration:none; font-size:12px; font-weight:normal; padding:0 20px;/* background:url(topnav_bg_link.gif) repeat-x left top;*/} #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ #menu li.current a {z-index:500; position:relative;color:#000; background:#38508c url(topnav_sel_bg.gif) repeat-x left top;} #menu li a:hover {z-index:500; position:relative;color:#18347d; background:#2775b3 url(topnav_bg_hover.gif) repeat-x left top;} #menu li:hover {position:relative; z-index:500;} #menu li:hover > a {color:38508c; background:#2775b3 url(topnav_bg_hover.gif) repeat-x left top;} #menu li:hover > a.sub {color:#fff; background:url(topnav_sel_bg.gif) repeat-x left top;} #menu li.current a {color:#fff; background:#38508c url(topnav_sel_bg.gif) repeat-x left top;} #menu li a.sub {background: transparent; } #menu li.current a.sub {color:#fff;background:url(topnav_sel_bg.gif)repea t-x; } /* */#menu :hover ul {left:0; top:26px; width:180px; background:#c6d1ed; padding-bottom:15px; } /* keep the 'next' level invisible by placing it off screen. */ #menu ul, /* */#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0 ; padding:15px 0 15px 0 ; list-style:none; background:#c6d1ed; width:204px;} #menu :hover ul :hover ul {left:120px; top:-1px; background:#c6d1ed; white-space:nowrap; z-index:200; height:auto; z-index:100;} /* */#menu :hover ul li {margin:0; background:#c6d1ed; width:180px} #menu :hover ul li a {width:170px;padding:0 0px 0 9px; text-indent:10px; background:#fff; color:#fff; height:24px; line-height:24px; background:#c6d1ed url(arow-white.gif) no-repeat 9px 8px; display:block; } #menu :hover ul li a.fly {background:#fff } #menu :hover ul li a.large {width:200px; padding:0 0 0 26px; text-indent:10px; background:#fff; color:#696868; height:24px; line-height:24px; background:url(arrow-green.gif) no-repeat 16px center; display:block; } #menu :hover ul :hover {background:#c6d1ed url(hover_lul_bg.png) no-repeat 0px 0px; color:#ffffff;} #menu :hover ul :hover a.fly {background-color:#c60; color:#fff;} #menu :hover ul li.currentsub a {background:#840; color:#fff;} #menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;} #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;} #menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;} #menu :hover ul :hover ul li.currentfly a, #menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;} this is the html file |
|
|
|
#6 (permalink) |
|
Right time, wrong thread
Join Date: Sep 2004
Posts: 7,969
|
Seeing that you have topmenuwrapper set at 0 I'm guessing it is passing that on to all of the child elements. Z-index is not absolute - setting something to Z-index 500 within a relatively positioned parent element with Z-index 0 won't make it affect anything outside of that parent element. So if the content block has Z-index 1 - it wins. |
|
![]() |
|