下拉菜單不工作在IE8 css

Question

我有一個下拉菜單，在除IE8以外的每個瀏覽器都可以工作。我試圖搞亂Z-index，但沒有太多運氣。當用戶將鼠標懸停在第一個元素上時，它將第二個列表顯示爲一個下拉列表，但是一旦用戶嘗試導航到它，它就會消失。還有什麼我可能會失蹤？請幫忙。

這裏是生成的HTML：

<div id="topNav" class="topNavMenu"> 
<ul> 
    <li><a href="/Main">Home</a></li> 
    <li><a rel="submenu1">Account Information</a></li> 
    <li><a rel="submenu2">Financial</a></li> 
    <li><a rel="submenu3">Pricing</a></li> 
    <li><a rel="submenu4">Operations</a></li> 
    <li><a rel="submenu5">Support</a></li> 
    <li><a rel="submenu6">Document Management</a></li> 
    <li><a rel="submenu7">Administration</a></li> 
</ul> 
<ul id="submenu1" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/19">Bill To/Ship To Search</a></li> 
    <li><a href="/Display/Page/Index/33">Customer Account Information</a></li> 
</ul> 
<ul id="submenu2" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/29">Statement Search</a></li> 
</ul> 
<ul id="submenu3" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/30">Price Notification Summary</a></li> 
</ul> 
<ul id="submenu4" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/31">Online Environmental Compliance</a></li> 
</ul> 
<ul id="submenu5" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/32">Manage Profile</a></li> 
    <li><a href="/Display/Page/Index/15">Administrative Interfaces</a></li> 
</ul> 
<ul id="submenu6" class="ddsubmenustyle"> 
    <li><a href="/Display/Page/Index/45">HES</a></li> 
    <li><a href="/Display/Page/Index/52">Marketing Services</a></li> 
    <li><a href="/Display/Page/Index/54">Sunoco University Classes</a></li> 
    <li><a href="/Display/Page/Index/43">Credit Card Program Information</a></li> 
</ul> 
<ul id="submenu7" class="ddsubmenustyle"> 
    <li><a href="/Administration/UserAdmin/CreateUser">Create a New User</a></li> 
    <li><a href="/Administration/UserAdmin">User Administration</a></li> 
    <li><a href="/Administration/UserAdmin/CreateRole">Create a New Role</a></li> 
    <li><a href="/Administration/MenuItem">Maintain Menu Items</a></li> 
    <li><a href="/Administration/MenuItem/RefreshMenu">Refresh Menu</a></li> 
</ul> 

</div> 

和CSS：

/* Top navigation menu 
    topNavMenu = the class used on the menu div. 
    ddsubmenustyle = dropdown div css. 
-----------------------------------------------------------*/ 

.topNavMenu ul 
{ 
    margin: 0; 
    padding: 0; 
    font: bold 12px Verdana; 
    list-style-type: none; 
    background: #C3C9D9; /* #153371 */ 
    overflow: hidden; 
    width: 100%; 
    background-image:url(../images/menu_bg.png); 
    height:35px; 
    float:left; 


} 

.topNavMenu li 
{ 
    display: inline; 
    margin: 0; 
    z-index: 100; 

} 

.topNavMenu li a 
{ 
    float: left; 
    display: block; 
    text-decoration: none; 
    margin: 0; 
    padding: 0px 10px; /*padding inside each tab*/ 
    border-right: 1px solid white; /*right divider between tabs*/ 
    color: black; 
    background: #6c94b0; /* #153371 */ 
    background-image:url(../images/menu_bg.png); 
    height:35px; 
    line-height:35px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    /*font-size:10px;*/ 
} 

.topNavMenu li a:visited 
{ 
    color: black; 
} 

.topNavMenu li a:hover 
{ 
    background:#4D77A7; /*background of tabs for hover state */ 
    color:White; 
    text-decoration:bold; 

} 

.topNavMenu a.selected 
{ 
    background: #4D77A7; /*background of tab with "selected" class assigned to its LI */ 
    color:White; 
} 

.ddsubmenustyle, .ddsubmenustyle div 
{ /*topmost and sub DIVs, respectively*/ 
    font: normal 12px Verdana; 
    margin: 0; 
    font-weight:bold; 
    padding: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    list-style-type: none; 
    background: white; 
    border-bottom-width: 0; 
    visibility: hidden; 
    z-index: 300; 

} 

.ddsubmenustyle ul 
{ 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    list-style-type: none; 
    border: 0px none; 
    z-index: 300; 
} 

.ddsubmenustyle li a 
{ 
    display: block; 
    width: 170px; /*width of menu (not including side paddings)*/ 
    color: white; 
    background-color: #aec6f6; 
    text-decoration: none; 
    padding: 4px 5px; 
    border-bottom: 1px solid white; 
    background-color:#4D77A7; 
    line-height:24px; 
    z-index: 300; 
} 

.ddsubmenustyle li ul li a, .ddsubmenustyle li ul li:first-child a 
{ 
    display: block; 
    width: 170px; /*width of menu (not including side paddings)*/ 
    color: white; 
    background-color: #aec6f6; 
    text-decoration: none; 
    padding: 4px 5px; 
    border-bottom: 1px solid white; 
    background-color:#4D77A7; 
    line-height:24px; 
    background-image:none; 
    -moz-border-bottom-radius: none; 
    -webkit-border-bottom-radius: none; 
    -khtml-border-bottom-radius: none; 
    border-bottom-radius: none; 
} 

.ddsubmenustyle li:first-child a 
{ 
    display: block; 
    width: 170px; /*width of menu (not including side paddings)*/ 
    color: white; 
    background-image:url(../images/arrow_first-child.png); 
    background-repeat:no-repeat; 
    background-position:top left; 
    background-color: #4D77A7; 
    text-decoration: none; 
    padding: 16px 5px 4px 5px; 
    border-bottom: 1px solid white; 
    background-color:#4D77A7; 
} 

.ddsubmenustyle li ul li:last-child a 
{ 

    -moz-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -khtml-border-bottom-right-radius: 0px; 
    border-bottom-right-radius: 0px; 
    -moz-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    -khtml-border-bottom-left-radius: 0px; 
    border-bottom-left-radius: 0px; 
    border-bottom: none; 
} 

.ddsubmenustyle li ul li a:hover 
{ 
    background-color:#4D77A7; 
    color: 40638A; 
    line-height:24px; 


} 

.ddsubmenustyle li:last-child a 
{ 

    -moz-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -khtml-border-bottom-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    -moz-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -khtml-border-bottom-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

* html .ddsubmenustyle li 
{ /*IE6 CSS hack*/ 
    display: inline-block; 
    width: 170px; /*width of menu (include side paddings of LI A*/ 
} 

.ddsubmenustyle li a:hover 
{ 
    background-color:#38587C; 
    color: white; 
    line-height:24px; 



} 

/* Neutral CSS */ 

.downarrowpointer 
{ /*CSS for "down" arrow image added to top menu items*/ 
    padding-left: 4px; 
    border: 0; 
} 

.rightarrowpointer 
{ /*CSS for "right" arrow image added to drop down menu items*/ 
    position: absolute; 
    padding-top: 3px; 
    left: 100px; 
    border: 0; 
} 

.ddiframeshim 
{ 
    position: absolute; 
    z-index: 500; 
    background: transparent; 
    border-width: 0; 
    width: 0; 
    height: 0; 
    display: block; 
} 

Answer 1

我試圖在Chrome瀏覽這個，但不能得到正常的工作。爲什麼子菜單將ul分開？也許你可以嘗試一個嵌套列表，像這樣：

<nav> 
    <ul class="top-nav"> 
    <li> 
     <a href="#">Item 1</a> 
     <ul class="sub-nav"> 
     <li><a href="#">Item 1a</a></li> 
     <li><a href="#">Item 1b</a></li> 
     <li><a href="#">Item 1c</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Item 2</a> 
     <ul class="sub-nav"> 
     <li><a href="#">Item 2a</a></li> 
     <li><a href="#">Item 2b</a></li> 
     <li><a href="#">Item 2c</a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

下面是一些CSS，使其工作：

* { 
margin: 0; 
padding: 0; 
list-style: none; 
color: inherit; 
text-decoration: none; 
} 
body { 
font-family: sans-serif; 
} 
nav { 
margin: 0 auto; 
} 
.sub-nav { 
display: none; 
} 
.sub-nav li { 
background: #333; 
color: #fff; 
padding: 4px 2px; 
border-bottom: 1px solid #e0e0e0; 
} 
.top-nav { 
overflow: hidden; 
} 
.top-nav > li { 
float: left; 
width: 100px; 
padding: 4px 0; 
background: #e0e0e0; 
} 
.top-nav > li:hover ul { 
display: block; 
} 

剛剛在Chrome和IE測試，工作正常。