CSS menu not working in IE7 or below - css

Question

In most browser it works perfectly.
but in IE7, please check the screenshot, it is really messy.
the drop down menu is not in the correct position.
the drop down menu items is not link together.
the search text field is not in the correct position.
the seach submit button-why there's a "text" on top of the button..?
the rounded corner (less important anyway)
please check the menu demo here.
<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>
ahh....

Answer 1

*:first-child+html .top-wrapper .top-menu li ul li
this will do the trick..
=)