1

我正在尝试创建一个带有圆角的下拉菜单，并且几乎已经到了那里，但在 IE 中存在一个小问题。如果您在 FF 中查看此链接 ( http://ids-ind.com/koris/dropdown.html )，它看起来和工作正常，但在 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;
}
4

1 回答 1

4

remove the position:relative; in below

ul.tabs a{}
于 2013-04-12T09:47:23.710 回答