title: CSS menu not working in IE7 or below
body: <p>In most browser it works perfectly.</p>
  
  <p>but in IE7, please check the <a href="http://goo.gl/QuWfU" rel="nofollow">screenshot</a>, it is really messy.</p>
  
  <ol>
  <li>the drop down menu is not in the correct position.</li>
  <li>the drop down menu items is not link together.</li>
  <li>the search text field is not in the correct position.</li>
  <li>the seach submit button-why there's a "text" on top of the button..?</li>
  <li>the rounded corner (less important anyway)</li>
  </ol>
  
  <p>please check the <a href="http://goo.gl/7CgTi" rel="nofollow">menu demo</a> here. </p>
  
  <pre><code>&lt;style&gt;
  
  .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 &gt; 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 &gt; 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 &gt; ul {
      background: none repeat scroll 0 0 transparent;
      display: block;
      margin: 0 0 0 0;
      padding: 10px 0 0;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>ahh....</p>