I think as developers most of us can agree that Internet Explorer is... well... basically the epitome of evil in the world of web browsers. But here is my dilemma.

In the included screenshots you can see that, as you might expect, the IE version isn't displaying as it should and the Chrome version works just fine for the nested lists I have.

I am using Sass and compiling to CSS, but I'll including both version of the styles and hopefully someone can tell me what my mistake is here. (Note: I have purposely left out the display:none; on the nested list for now so that I don't have to hover my mouse to see changes every time I refresh the page.)

IEproblem.jpg
inChrome.jpg

Here's the Sass
Code:
.topbar{
  z-index:10;
  top:0px;
  left:0px;
  width:100%;
  height:60px;
  overflow: visible;
  @include gradient(#8c8c8c ,#000000);
  @include box-shadow(black, 2px, 20px);
  & > ul{
    list-style-type: none;
    width:730px;
    height:60px;
    & > li{
      float:left;
      & > :not(.last){border-right:2px white solid;}
      & > a{
        font-family: Tahoma, Geneva, sans-serif;
        font-size:30px;
        display:block;
        padding:11px 40px 11px 40px;
        color:white;
        &:hover{
          background:rgba(255, 255, 255, 0.3);
        }
      }
      &:hover > ul{
        display:block;
      }
      ul{
        list-style: none;
        background: #8c8c8c;
        li{
          text-align: center;
          a{
            padding: 10px;
          }
        }
      }
    }
  }
  form{
    top:0px;
    left:730px;
    height:60px;
    label{
      top:5px;
      color:white;
      font-family: Verdana, Arial, sans-serif;
      &.last{
        top:33px;
      }
    }
    input{
      left: 100px;
      &.last{
        top:28px;
      }
      &[type=submit]{
        left:260px;
        top:3px;
        height:50px;
      }
    }
  }
}
and here's the CSS
Code:
.topbar {
  z-index: 10;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  overflow: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FF000000', endColorstr='#FF8C8C8C')";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF000000', endColorstr='#FF8C8C8C',GradientType=0 );
  background-image: -ms-linear-gradient(bottom, #8c8c8c 0%, black 100%);
  background-image: -moz-linear-gradient(bottom, #8c8c8c 0%, black 100%);
  background-image: -o-linear-gradient(bottom, #8c8c8c 0%, black 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #8c8c8c), color-stop(1, black));
  background-image: -webkit-linear-gradient(bottom, #8c8c8c 0%, black 100%);
  background-image: linear-gradient(to top, #8c8c8c 0%, black 100%);
  box-shadow: 2px 2px 20px black; }
  .topbar > ul {
    list-style-type: none;
    width: 730px;
    height: 60px; }
    .topbar > ul > li {
      float: left; }
      .topbar > ul > li > :not(.last) {
        border-right: 2px white solid; }
      .topbar > ul > li > a {
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 30px;
        display: block;
        padding: 11px 40px 11px 40px;
        color: white; }
        .topbar > ul > li > a:hover {
          background: rgba(255, 255, 255, 0.3); }
      .topbar > ul > li:hover > ul {
        display: block; }
      .topbar > ul > li ul {
        list-style: none;
        background: #8c8c8c; }
        .topbar > ul > li ul li {
          text-align: center; }
          .topbar > ul > li ul li a {
            padding: 10px; }
  .topbar form {
    top: 0px;
    left: 730px;
    height: 60px; }
    .topbar form label {
      top: 5px;
      color: white;
      font-family: Verdana, Arial, sans-serif; }
      .topbar form label.last {
        top: 33px; }
    .topbar form input {
      left: 100px; }
      .topbar form input.last {
        top: 28px; }
      .topbar form input[type=submit] {
        left: 260px;
        top: 3px;
        height: 50px; }