html - CSS メニュー - IE 表示の問題

Question

角が丸いドロップダウン メニューを作成しようとしていますが、ほぼ到達しましたが、IE で小さな問題が発生しました。このリンク ( http://ids-ind.com/koris/dropdown.html ) を FF で表示すると、見た目も動作も問題ありませんが、IE では右側が平らになっています。

FFのように見えるようにするために何をする必要があるか、または変更する必要があるか教えてください。

以下は私が使用しているCSSです

a:link {text-decoration:none;}

/* tabs
*************************/

ul.tabs
{
    display: table;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

ul.tabs li
{
    margin: 0 0 0 1px;
    padding: 0;
    list-style: none;
    display: table-cell;
    float: left;
    position: relative;
    background:url('../images/menuleft_bg.png') left bottom no-repeat; 
    line-height:55px;
    width:130px;
}

ul.tabs a
{
    position: relative;
    display: block;
    background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}

/* dropdowns
*************************/

ul.dropdown
{
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    z-index: 999;
    top: 100%;
    width: 130px;
    display: none;
    left: 0;
}

ul.dropdown ul.dropdown
{
    top: 0;
    left: 100%;
}

ul.dropdown li
{
    margin: 0;
    padding: 0;
    float: none;
    position: relative;
    list-style: none;
    display: block;
}

ul.dropdown li a
{
    display: block;
}


/* menu-specifc
*************************/

#menu
{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    height: 40px;
    line-height: 40px;
    border-bottom: 0px solid #000;
}

#menu ul
{
    margin: 0 auto;
}


#menu ul li h4
{
    margin: 0;
}

#menu ul li h4 a
{
    font-size: 14px;
    color: #000;
    font-weight: bold;
    padding: 0 15px;
}

#menu ul li a
{
    color: #fff;
    padding-left: 4px;
}

#menu ul li a img
{
    vertical-align: middle;
}

#menu ul li a span
{
    display: block;
    padding: 0 20px;
    text-align:center;
}

#menu ul.dropdown
{
    padding: 20px 0;
    background-image: url('../images/dropdownbg.png');
    overflow:hidden;
    border-bottom: 0px solid #dc902f;
    width: 130px;
    z-index:110;
}

#menu ul.dropdown li a
{
    border-bottom: 0px solid #e5cd8e;
    line-height: 30px;
    overflow: hidden;
    height: 30px;
    background-image: url('../images/dropdownbg2.png');
}

#menu ul.dropdown li.last a
{
    border-bottom-width: 0;
}

#menu ul.dropdown li a:hover
{
    color:#990000;
}

#menu ul li h4 a:hover
{
    background-image: none;
}

Answer 1

remove the position:relative; in below

ul.tabs a{}