Question

我正在尝试创建一个带圆角的下拉菜单，并且几乎到了那里但是在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;
}

Answer 1

删除下面的position:relative;

ul.tabs a{}

CSS菜单 - IE显示问题

1 个答案: