CSS菜單不能在IE7或更低版​​本中工作

Question

在大多數瀏覽器中，它都可以正常工作。

但在IE7中，請檢查screenshot，這真的很亂。

1. 下拉菜單不在正確的位置。
2. 下拉菜單項不鏈接在一起。
3. 搜索文本字段不在正確的位置。
4. seach提交按鈕 - 爲什麼在按鈕頂部有一個「文本」？
5. 圓角（那麼重要反正）

請檢查menu demo這裏。

<style> 

.header-bg { 
background: url(img/header-bg.jpg) repeat-x top; 
height: 420px; 
} 

body { 
    background: url(img/page-bg.jpg) repeat; 
    font-family: Arial, Helvetica, sans-serif; 
    } 

     .top-wrapper { 
    background: none; 
    margin: -430px auto 270px; 
    min-height: 150px; 
    padding: 10px 27px 0 27px; 
    width: 980px; 
    clear: both; 
    overflow: hidden; 
} 
.top-wrapper .top-menu { 
    background: #f1faf4; 
    border-right: 1px solid #81b030; 
    border-bottom: 1px solid #81b030; 
    border-left: 1px solid #81b030; 
    -moz-border-radius-bottomright: 6px; 
    border-bottom-right-radius: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    border-bottom-left-radius: 6px; 
    padding: 10px 35px 8px 35px; 
    float: right; 
} 
.top-wrapper .top-menu li { 
    float: left; 
    padding: 8px 14px 10px 0; 
    margin: 0 14px 0 0; 
    border-right: 1px dotted #282828; 
} 
.top-wrapper .top-menu li a { 
    color: #282828; 
    font-size: 12px; 
    font-weight: bold; 
    text-decoration: none; 
} 
.top-wrapper .top-menu li a:hover { 
    text-decoration: underline; 
} 
.top-wrapper .top-menu li.search { 
    padding: 0 10px 0 0; 
} 
.top-wrapper .top-menu li.search input { 
    float: left; 
    border: none; 
} 
.top-wrapper .top-menu li.search input.search { 
    background: url(img/top-input-bg.png) no-repeat left; 
    width: 188px; 
    height: 34px; 
    font-size: 12px; 
    padding: 0 0 0 7px; 
    color: #9fa0a0; 
} 
.top-wrapper .top-menu li.search input.submit { 
    background: url(img/top-submit-bg.png) no-repeat left; 
    width: 27px; 
    height: 34px; 
    padding: 0; 
    text-indent: -9999px; 
    outline: none; 
    cursor: pointer; 
} 
.top-wrapper .top-menu li.fb-signin { 
    padding: 2px 0 0 0; 
    margin: 0; 
    border: none; 
} 
.top-wrapper .top-menu li.fb-signin a { 
    width: 90px; 
    height: 30px; 
    display: block; 
    outline: none; 
    cursor: pointer; 
    background: url(img/btn-fb-signin.png) no-repeat left; 
    text-indent: -9999px; 
} 
.top-wrapper .top-menu li.signedin { 
    padding: 2px 0 0 0; 
    margin: 0; 
    border: none; 
} 
.top-wrapper .top-menu li.signedin img { 
    display: inline-block; 
    margin: 0 10px 0 0; 
    vertical-align: top; 
} 
.top-wrapper .top-menu li.signedin a.menu { 
    display: inline-block; 
    margin: 10px 0 0 0; 
} 
/* REGULAR MENU DROPDOWN */ 
.top-wrapper .top-menu li ul { 
    display: none; 
    margin: 0; 
    padding: 10px 0 0 -50px; 
    margin: 0 0 0 -50px; 
    position: absolute; 
    top: 42px; 
    text-align: left; 
    width: 160px; 
} 
.top-wrapper .top-menu li ul li { 
    background: none repeat scroll 0 0 #F1FAF4; 
    border-bottom: 1px solid #b3c8ba; 
    border-right: none; 
    display: inline-block; 
    float: none; 
    margin: 0 0 0 -15px; 
    padding: 10px 0; 
    width: 160px; 
    position: relative; 
    z-index: 1000; 
} 
.top-wrapper .top-menu li ul li a { 
    color: #000 !important; 
    text-decoration: none; 
    padding: 0 0 0 15px; 
} 
.top-wrapper .top-menu li ul li a:hover { 
    text-decoration: underline; 
} 
.top-wrapper .top-menu li:hover > ul { 
    background: none repeat scroll 0 0 transparent; 
    display: block; 
    margin: 0 0 0 0; 
    padding: 10px 0 0; 
} 

/* USER MENU DROPDOWN */ 
.top-wrapper .top-menu li.signedin ul { 
    display: none; 
    margin: 0; 
    padding: 10px 0 0; 
    position: absolute; 
    top: 42px; 
    text-align: left; 
    width: 200px; 
} 
.top-wrapper .top-menu li.signedin ul li { 
    background: none repeat scroll 0 0 #F1FAF4; 
    border-bottom: 1px solid #b3c8ba; 
    border-right: none; 
    display: inline-block; 
    float: none; 
    margin: 0; 
    padding: 10px 0; 
    width: 125px; 
    position: relative; 
    z-index: 1000; 
} 
.top-wrapper .top-menu li ul li.first .corner-left { 
    background: url(img/menu-corner-left.png) no-repeat center; 
    width: 6px; 
    height: 6px; 
    position: absolute; 
    left: -6px; 
    top: 0; 
} 

.top-wrapper .top-menu li ul li.first .corner-right { 
    background: url(img/menu-corner-right.png) no-repeat center; 
    width: 6px; 
    height: 6px; 
    position: absolute; 
    right: -6px; 
    top: 0; 
} 

.top-wrapper .top-menu li ul li.last { 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    -moz-border-bottom-right-radius: 6px; 
    -moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
} 

.top-wrapper .top-menu li.signedin ul li a { 
    color: #000 !important; 
    text-decoration: none; 
    padding: 0 0 0 10px; 
} 
.top-wrapper .top-menu li.signedin ul li a:hover { 
    text-decoration: underline; 
} 
.top-wrapper .top-menu li.signedin:hover > ul { 
    background: none repeat scroll 0 0 transparent; 
    display: block; 
    margin: 0 0 0 0; 
    padding: 10px 0 0; 
} 
/* SEARCH MENU DROPDOWN */ 
.top-wrapper .top-menu li.search ul { 
    display: none; 
    margin: 0; 
    padding: 10px 0 0; 
    position: absolute; 
    top: 42px; 
    text-align: left; 
    width: 222px; 
} 

.top-wrapper .top-menu li.search input.search:focus {outline: none; border: none;} 
} 

.top-wrapper .top-menu li.search ul li { 
    background: none repeat scroll 0 0 #F1FAF4; 
    border-bottom: 1px solid #b3c8ba; 
    border-right: none; 
    display: inline-block; 
    float: none; 
    margin: 0; 
    padding: 10px 0; 
    width: 222px; 
    position: relative; 
    z-index: 1000; 
} 
.top-wrapper .top-menu li.search ul li a { 
    color: #000 !important; 
    text-decoration: none; 
    padding: 0 0 0 15px; 
} 
.top-wrapper .top-menu li.search ul li a:hover { 
    text-decoration: underline; 
} 
.top-wrapper .top-menu li.search:hover > ul { 
    background: none repeat scroll 0 0 transparent; 
    display: block; 
    margin: 0 0 0 0; 
    padding: 10px 0 0; 
} 

</style> 

啊....

Answer 1

*:first-child+html .top-wrapper .top-menu li ul li 

這將這樣的伎倆.. =）