2013-11-22 150 views
0

下面的HTML沒有工作,CSS使得在Chrome和Firefox的作​​品簡單的下拉菜單中,但在IE無法正常工作(當一個懸停在下拉菜單鏈接的下拉列表不顯示)CSS下拉菜單中即

任何人都可以幫我解決這個問題嗎?

謝謝:)

的HTML:

<link rel="stylesheet" href="style.css"> 

<div id="topMenu"> 
    <div class="drop"> 
    <ul class="drop_menu"> 
    <li><a href='#'>Home</a> 
    </li> 
    <li><a href='#'><?php echo $catTitle; ?> Services</a> 
     <ul> 
     <li><a href='/category/category1/'>category1</a></li> 
     <li><a href='/category/category2/'>category2</a></li> 
     <li><a href='/category/category3/'>category3</a></li> 
     <li><a href='/category/category4/'>category4</a></li> 
     <li><a href='/category/category5/'>category5</a></li> 
     <li><a href='/category/category6/'>category6</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>Specialist Services</a> 
     <ul> 
     <li><a href='/category/category1/'>category1</a></li> 
     <li><a href='/category/category2/'>category2</a></li> 
     <li><a href='/category/category3/'>category3</a></li> 
     <li><a href='/category/category4/'>category4</a></li> 
     <li><a href='/category/category5/'>category5</a></li> 
     <li><a href='/category/category6/'>category6</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>About Us</a> 
     <ul> 
     <li><a href='#'>Company Profile</a></li> 
     <li><a href='#'>Reviews</a></li> 
     <li><a href='#'>Legal Info</a></li> 
     <li><a href='#'>Terms & Conditions</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>Track A Shipment</a> 
    </li> 
    </ul> 
    </div> 
</div> 

的CSS:

/* Layout for the TOP menu */ 

.drop { 
width: 970px; 
margin: 0 auto; 
height: 35px; 
} 

.drop_menu { 
    background:#005555; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    height:35px; 
} 
.drop_menu li { float:left; } 
.drop_menu li a { 
    padding:9px 20px; 
    display:block; 
    color:#fff; 
    text-decoration:none; 
    /*font:12px arial, verdana, sans-serif;*/ 
} 

/* Submenu */ 
.drop_menu ul { 
    position:absolute; 
    left:-9999px; 
    top:-9999px; 
    list-style-type:none; 
} 
.drop_menu li:hover { position:relative; background:#06266f; } 
.drop_menu li:hover ul { 
    left:0px; 
    top:35px; 
    background:#06266f; 
    padding:0px; 
} 

.drop_menu li:hover ul li a { 
    padding:5px; 
    display:block; 
    width:185px; 
    text-indent:5px; 
    background-color:#707070; 
} 
.drop_menu li:hover ul li a:hover { background:#06266f; } 









/* End of top menu layout */ 
+0

什麼版本的IE?它似乎在IE9中工作 –

+1

是<!DOCTYPE html>'指定..? –

+0

這是IE9。它對我來說不起作用,這看起來很奇怪。經過檢查,似乎我錯過了修正它的DOCTYPE聲明 - 謝謝:) – user2016348

回答

0

對於過時的歌曲懸停的支持,使用whatever:hover

更重要的是,使用ie9.js解決所有oldIE怪癖。