Добрый день!
есть код

                  <div id="city">
                        <a href="#">Санкт-Петербург</a>
                    <div id="allcity">
                    <a href="#">Москва</a><br />
                    <a href="#">Екатеринбург</a>
                    </div> 
                    </div> 

#city{
    top: -4px;
    position: relative;
    display: block;
float: left;
    width: 110px;
    height: 20px;
}

#city a{
  font-family: Rotonda-regular; 
  font-size: 14px;
  color: #989898; 
  text-decoration: none;
  border-bottom: 1px dashed #989898;  
}

#allcity a{
padding: 4px 0px 0px 5px;    
    
}

#allcity{
 visibility: hidden;
position: absolute;
width: 118px;
height:73px;
 border: 0px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;  
background-image: url('../images/othercity.png');
}

#city:hover > div {
        opacity: 1;
        visibility: visible;
        display: block;
        margin: 0;
        z-index: 999;
}

везде все ок, кроме ie там блок

  <div id="allcity">
                    <a href="#">Москва</a><br />
                    <a href="#">Екатеринбург</a>
                    </div> 

на одном уровне с <a href="#">Санкт-Петербург</a>
и в стороне.

Как это можно исправить?