IE下的CSS下拉菜單不工作（所有版本）

Question

我有一些CSS下拉菜單浮動在另一個導航div的問題。它在除IE以外的所有瀏覽器中都可以正常工作。
這是坐在頁面上的腳本（是的，它是正確的Doctype）。

<div id="topbar"> 
<h2 style="color: #2d2d2d; padding: 20px;"> 
<a class="topbar" href="/index.php">Site Title</a><span style="float:right; clear:right; 
margin-top: -32px; "> 
<div id='cssmenu'> 
<ul> 
<li class='active has-sub'><a href='/profile.php'><span> 
    Profile Name  </span></a> 
    <ul> 
    <li><a href="/profile.php">Profile</a></li> 
    <li><a href="/editaccount.php">Account</a></li> 
    <li><a href="logout.php">Logout</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 
    </span> </div> 



> #cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
> 
> #cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
> #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
> 
> /* Styling navigation links */ #cssmenu > ul > li > a{ 
> outline:none; display:block; position:relative; padding:12px 
> 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; 
> text-align:center; text-decoration:none; text-shadow:1px 1px 0 
> rgba(0,0,0, 0.4); } 
> 
> #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
> 
> 
> /* Extra border for navigation links */ #cssmenu > ul > li > 
> a:after{ content:''; position:absolute; border-right:1px 
> solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
> #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
> 
> /* Bullet for dropdowns */ #cssmenu > ul > li.has-sub > 
> a:before{ content:''; position:absolute; top:18px; right:6px; 
> border:5px solid transparent; border-top:5px solid #fff; } 
> #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
> 
> /* Hover state styles for drop menu link */ #cssmenu ul 
> li.has-sub:hover > a{ background:#3f3f3f; border-color:#ccc; 
> padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; 
> } 
> 
> /* Show dropdown when hover */ #cssmenu ul li.has-sub:hover > 
> ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul 
> li.has-sub > a:hover{background:#3f3f3f; border-color:#ccc;} 
> 
> /* Dropdown styles */ #cssmenu ul li > ul, #cssmenu ul li > div{ 
> display:none; width:auto; position:absolute; top:38px; 
> padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; 
> z-index:999; } 
> 
> /* Dropdown list style */ #cssmenu ul li > ul{width:200px;} 
> #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li 
> a{ outline:none; display:block; position:relative; margin:0; 
> padding:8px 20px; color:#fff; text-decoration:none; 
> text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
> 
> /* Dropdown box styles */ #cssmenu ul li > div{width:auto; 
> padding:20px;} #cssmenu ul li > div p{ font:9pt/150%; 
> color:#fff; text-align:justify; text-shadow:1px 1px 0 
> rgba(0,0,0,0.5); margin:0; } 
> 
> #cssmenu ul li > div h1{ position:relative; margin:0 0 12px 
> 0; padding-bottom:10px; border-bottom:1px solid #222; 
> font:bold 13pt; color:#bbb; text-shadow:1px 1px 0 rgba(0,0,0,0.5); 
> } #cssmenu ul li > div h1:after{ content:''; height:0; 
> padding:0; position:absolute; bottom:-2px; left:0; right:0; 
> border-bottom:1px solid #555; } 

Answer 1

檢查此琴鏈接here

*{ 
    padding:0; 
    margin:0; 
    } 
body { 
    font:normal 12px/18px Arial, Helvetica, sans-serif; 
    color:#000; 
    padding:20px; 
    background-color:#F2F2F2; 
    } 
ul, li, ol { 
    list-style-type:none; 
    } 

.wrapper { 
    width:95%; 
    padding:10px; 
    margin:0 auto; 
    border:1px solid green; 
} 
.spacer { 
    clear:both; 
    font-size:0; 
    line-height:0; 
    height:0; 
    } 

h2 { 
    float:left; 
    color:#2d2d2d; 
    padding:20px; 
    } 
#cssmenu{ 
    height:37px; 
    display:block; 
    padding:0; 
    border:1px solid; 
    border-radius:5px; 
} 
#cssmenu > ul { 
    list-style:inside none; 
    padding:0; 
    margin:0; 
    } 
#cssmenu > ul > li { 
    list-style:inside none; 
    padding:0; 
    margin:0; 
    float:left;  
    display:block; 
    position:relative; 
    } 

/* Styling navigation links */  
#cssmenu > ul > li > a{ 
    outline:none; 
    display:block; 
    position:relative; 
    padding:12px 20px; 
    font:bold 13px/100% Arial, Helvetica, sans-serif; 
    text-align:center; 
    text-decoration:none; 
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4);  
    } 
    #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 


/* Extra border for navigation links */  
#cssmenu > ul > li > a:after{ 
    content:''; 
    position:absolute;  
    border-right:1px solid;  
    top:-1px; bottom:-1px; right:-2px; 
    z-index:99;  
    } 
#cssmenu ul li.has-sub:hover > a:after{ 
    top:0; 
    bottom:0; 
    } 

/* Bullet for dropdowns */  
#cssmenu > ul > li.has-sub > a:before{  
    content:'';  
    position:absolute; 
    top:18px; 
    right:6px; 
    border:5px solid transparent;  
    border-top:5px solid #fff;  
    } 
#cssmenu > ul > li.has-sub:hover > a:before{ 
    top:19px; 
    } 

/* Hover state styles for drop menu link */ 
#cssmenu ul li.has-sub:hover > a{  
    background:#3f3f3f; 
    border-color:#ccc; 
    padding-bottom:13px; 
    padding-top:13px;  
    top:-1px; 
    z-index:999; 
    } 

/* Show dropdown when hover */  
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{ 
    display:block; 
    }  
#cssmenu ul li.has-sub > a:hover{ 
    background:#3f3f3f; 
    border-color:#ccc; 
    } 

/* Dropdown styles */ 
#cssmenu ul li > ul, #cssmenu ul li > div{ 
    display:none; 
    width:auto; 
    position:absolute; 
    top:38px; 
    right: -2px; 
    text-align: right; 
    padding:10px 0;  
    background:#3f3f3f;  
    border-radius:0 0 5px 5px; 
    z-index:999; 
    } 

/* Dropdown list style */ 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{ 
    display:block; 
    list-style:inside none; 
    padding:0; 
    margin:0;  
    position:relative; 
    }  
#cssmenu ul li > ul li a{  
    outline:none; 
    display:block;  
    position:relative; 
    margin:0; 
    padding:8px 20px;  
    color:#fff; 
    text-decoration:none; 
    text-shadow:1px 1px 0 rgba(0,0,0, 0.5); 
    } 

/* Dropdown box styles */  
#cssmenu ul li > div{ 
width:auto; 
padding:20px; 
}  
#cssmenu ul li > div p{  
    font:9pt/150%; 
    color:#fff;  
    text-align:justify;  
    text-shadow:1px 1px 0 
    rgba(0,0,0,0.5);  
    margin:0;  
    } 
#cssmenu ul li > div h1{  
    position:relative;  
    margin:0 0 12px 0;  
    padding-bottom:10px;  
    border-bottom:1px solid #222; 
    font:bold 13pt; color:#bbb;  
    text-shadow:1px 1px 0 rgba(0,0,0,0.5); 
    } 
#cssmenu ul li > div h1:after{ 
    content:''; 
    height:0; 
    padding:0; 
    position:absolute; 
    bottom:-2px; 
    left:0; 
    right:0; 
    border-bottom:1px solid #555; 
    }