Выпадающее меню - Internet Explorer 7

[Seemann]

Думаю, проблема будет ясна, если взглянуть на два скрина в приложении.

Поясню, что скрин с названием normal.png - то как должно отображаться выпадающее меню и как отображается сейчас в нормальных браузерах (Chrome, Firefox и т.д.)

Второй скрин (abnormal.png) отображает проблему воспроизведения кода всеми любимым Internet Explorer'ом 7й версии.

HTML Code:

<td scope="col" class="bundling"> 
  <div id="gear"> 
	  <a><p>Open</p></a> 
	  <div class="bundling"> 
		  <ul class="actions"> 
		  </ul> 
		  <!-- <span class="hr"></span> --> 
		  <ul class="selects"> 
				<li> 
					<a id="select_all_pages" href="java script:void(0)">Select all rows in all pages</a> 
				</li> 
				<li> 
					<a id="select_this_page" href="java script:void(0)">Select all rows from this page</a> 
				</li> 
		  </ul> 
	  </div> 
  </div> 
</td>

CSS Code:

.ts_dataTable th.bundling {position:relative; z-index:1;}
#gear {
	z-index: 999999 !important;
	margin-right:10px;
}
#gear .selects a {color: #0082ee; display: block;}
#gear .actions a {color: #333; display: block;}
#gear a:hover {color: #000;}
#gear ul {font-weight: normal; text-transform:none;}
.ts_dataTable span.hr {
	background-color:#ccc;
	display:block;
	width: 160px;
	margin: 4px 15px;
	border-bottom: 1px solid #afafaf;
	font-size: 0;
	line-height:1px;
	*background-color:#000000;
}
#gear li {padding:4px 10px 4px 15px; margin:0;}
#gear li:hover, #gear li:hover a {background-color: #0082ee; color: #FFF; text-decoration: none;}
div.bundling {border: 1px solid  #c3c3c3; border-top: none; background-image:url(../images/ts/bundling_bordertop.gif); background-color: #FFF; width:auto !important }
div#gear li.active a {	padding-left: 18px; background-image:url(../images/ts/checkmark.png); background-position:0 50%; color: #333; font-weight: bold;}
div#gear p {background-image:url(../images/ts/bulk_btn.gif); width:57px; height:27px; text-indent: -9999px; padding:0; margin:0; z-index: 999 !important;}
div#gear.open p {background-image:url(../images/ts/bulk_btnhover.gif);}
#gear .bundling {display:none;position:absolute;z-index:999;}
#gear.open .bundling {display:block;}

P.S. Код не мой, исправляю баги, но тут тупик(

[sigma77]

Seemann,

z-index работает только вместе с position absolute, relative и fixed

Начните с этого. Дальше видно будет. И хорошо бы ссылку...

[Seemann]

sigma77,

Спасибо за ответ!

Всё оказалось куда банальнее чем ожидалось(

Просто неправильно был прописан селектор:

.ts_dataTable th.bundling {position:relative; z-index:1;}

В то время как в html коде уже нет th, а вместо него td.