下拉菜單不工作任何IE裏面的易趣列表

Question

嘿大家都希望一切都好。好吧，我有這個問題，並尋求一些指導。

我有一個下拉導航菜單爲我的eBay列表之一。此下拉菜單在所有其他瀏覽器（除了任何瀏覽器以外）上都可以正常工作。我在我的易趣沙盒帳戶上添加了一個實例，供您查看。

http://cgi.sandbox.ebay.com/ws/eBayISAPI.dll?ViewItem&item=110126145012#ht_500wt_1156

我現在用的是同一個下拉在商店菜單，並因此出於某種原因，儘快適用於所有的瀏覽器包括IE9，IE8，IE7，因爲我把它上市的一切內部停止工作即，我能想到的唯一的事情就是阻止它的東西，或者eBay有一些代碼覆蓋它的一些方法。我想我會讓其他人看一看，看看他們是否注意到任何事情，或者在這個問題上有經驗。下面是代碼我使用

HTML

<div id="menu-wrap"> 
<div class="menu"> 
<ul> 

<li><a class="home" href="#"></a></li> 

<li><a href="#">Name Of Link</a> 
<ul> 
<li><a href="#">Link1</a></li> 
<li><a href="#">Link2</a></li> 
<li><a href="#">Link3</a></li> 
<li><a href="#">Link4</a></li> 
</ul> 
</li> 

<li><a href="#">Newborn</a> 
<ul> 
<li><a href="#">Link1</a></li> 
<li><a href="#">Link2</a></li> 
<li><a href="#">Link3</a></li> 
<li><a href="#">Link4</a></li> 
<li><a href="#">Link5</a></li> 
<li><a href="#">Link6</a></li> 
<li><a href="#">Link7</a></li> 
<li><a href="#">Link8</a></li> 
</ul> 
</li> 

<li><a href="#">Socks/Tights</a> 
<ul> 
<li><a href="#">Link1</a></li> 
<li><a href="#">Link2</a></li> 
<li><a href="#">Link3</a></li> 
<li><a href="#">Link4</a></li> 
<li><a href="#">Link5</a></li> 
<li><a href="#">Link6</a></li> 
</ul> 
</li> 

</ul> 
</div><!-- END menu --> 
</div><!-- END menu-wrap --> 

CSS

.menu{float:left; width:902px;margin:5px 0px 0px 125px;} 
.menu ul{margin:0; padding:0; float:left; list-style:none;} 
.menu ul li{position:relative;float:left;margin: 0px; padding: 0px;} 
.menu ul li a{display:block;height:63px; padding: 0px 13px 0px 13px; font-family: Verdana, Geneva, sans-serif; font-size: 27px; font-weight: normal; color: #fff; text-decoration: none; margin: 0px 2px 0px 0px; background:url(../images/menu-arrow-hover.png) no-repeat right 25px;line-height: 52px;} 
.menu ul li a.home {margin: 15px 0px 0px 0px; background-image:none;} 
.menu ul li a.home img { border:0px;} 
.menu ul li a.home:hover {margin: 15px 0px 0px 0px; background:none;} 
.menu ul:hover li.active a{text-decoration:none;} 
.menu ul li.active > a, .menu ul li:hover > a, .menu ul li.active:hover a{text-decoration:none; background: #6bbed1 url(../images/menu-sub-hover.png) no-repeat 25px bottom; } 
.menu ul li a:active, .menu ul li.active a:active{color:#CCC;} 
.menu ul ul{position:absolute;visibility:hidden;opacity:0;border: 10px solid #fff;background: #f3f3f3;min-width: 15em;padding: 20px 0 8px;-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,.5);-moz-box-shadow: 2px 2px 5px rgba(0,0,0,.5);box-shadow: 2px 2px 5px rgba(0,0,0,.5);z-index: 9999;} 
.menu ul li:hover > ul{visibility:visible;opacity:1;} 
.menu ul ul li{cursor:pointer; text-align:left;} 
.menu ul ul li a{width:134px; height:31px;padding-right:0; color: #434343;font-size: 18px; line-height:32px;text-transform:none;display: block;padding: 0 0 3px 7px;} 
.menu ul ul li span{position:absolute;top:0;right:10px;font-size:16px;} 
.menu ul ul li:hover > a{background:#f3f3f3; color:#83d14f;} 
.menu ul ul li a:active{color:#CCC;} 
.menu ul ul ul{top:-1px;left:100%;padding:0;} 
.menu input#dropdown, .menu label{display:none;position:absolute;top:5px;right:14px;width:46px;height:35px;} 
.menu input#dropdown{opacity:0;} 
.menu label{background:#222 url(../images/list_icon.png) no-repeat center;webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} 
.menu label:hover{cursor:pointer;} 
.menu input#dropdown:checked ~ label{-webkit-box-shadow:inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;-moz-box-shadow:inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;box-shadow:inset 0 0 28px #2A2A2A, inset 0 0 6px #1A1A1A;} 
.menu input#dropdown:checked ~ ul{display:block;} 
.menu p{display:none;position:absolute;top:12px;left:14px;margin:0;font:19px Arial, Helvetica, sans-serif;color:#9E9E9E;} 

任何幫助，將不勝感激

感謝您的時間

阿里

Answer 1

您使用不透明度來隱藏和顯示嵌套標記。即8和以下我相信不支持opacity或rgba。你可以通過顯示none來隱藏和顯示塊來解決這個問題。

當我回家向你展示時，我將做一個小提琴，我目前正在使用我的iphone：/。

這是我從前一個問題做的小提琴，直到我回家。

[的jsfiddle] [1]

http://jsfiddle.net/Josh_Powell/XvQRH/[1]