下拉链接在左边?

时间:2012-05-23 17:07:09

标签: css drop-down-menu menu hyperlink

任何人都可以看到为什么下拉链接偏向左边? http://altadorcup.sketchedneo.com/testing/

如果您将鼠标悬停在游戏指南上,请注意下拉链接框是左侧而不是中间位置。

我不确定需要哪个css位,所以即时发布所有下拉菜单css

所以我想,如果有人能看到这个问题,那么文本会左对齐但是框对齐中间?

#navigation ul {
    padding:10px 1px 1px 1px;
    margin: 0;
    list-style: none;
    float:middle; text-align:left;
}
#pad{padding:0px 0px 0px 45px;}
#navigation li {
    float: left;
    position: relative;


}

#navigation a{
     display:block;
    color:#fff;
    text-decoration:none;
    padding:0px 10px;

}


#navigation ul ul{
    position:absolute;
    left:-999em;
    height:auto;
     z-index:497;
    width:129px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
 background:#8c8c8c;
    padding: 2px;  border:1px solid #ffffff;   border-top:1px solid #ffffff;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;

}
#navigation ul ul ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:129px;
    font-weight:normal;
    margin:0;

    line-height:1;
    border:0;
 background:#8c8c8c;
    padding: 2px;  border:1px solid #ffffff;   border-top:1px solid #ffffff;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
     z-index:497;

}
#navigation li li {
    width:99px;

    font-weight:bold;
    font-family:helvetica,sans-serif;
    }
#navigation li li a {
    padding:4px 10px;
    width:100px;
    font-size:12px;
    color:#fff;
    }
#navigation li ul ul {
    margin:0px 0 0 0px;
    }
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#8C8C8C; }

    #navigation a:link,#navigation a:visited, #navigation a:active {
    color: #fff;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
}

#navigation a:hover {
    color: #000;
    font-weight: normal;
    text-align:  left;
    text-decoration: none;

}

2 个答案:

答案 0 :(得分:2)

没有float: middle。你需要调整你的绝对定位。

答案 1 :(得分:0)

他们不是。框中的文本与左侧对齐,而菜单文本在中间对齐,让您感觉下拉菜单位于左侧。