0 
.head_menu
{
    height:30px;
    line-height:30px;
    color:#FFF;
    position:absolute;
    font-family:Arial;
    font-size:15px;
    right:15px;
    z-index:2;
    top:3px;

}
.head_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
}
.head_menu ul li
{
    padding:0;
    margin:0;
    float:left;

}
.head_menu ul li a
{
    color:#FFF;
    display:block;
    text-decoration:none;

}
.head_menu ul li a:hover
{

    color:#FFF;
    text-decoration:underline;
    text-shadow: 0 0 10px #FFF;
}
.head_menu ul li ul a:hover
{
    background:#e17310;
}
.head_menu ul li ul
{
     display: none;
     width: auto;
     position:absolute;
     top:30px;
     padding:0px;
     margin:0px;

}
.head_menu ul li:hover ul
{
     display:block;     
     position:absolute;
     margin: 0;
     padding: 0;
}
.head_menu ul li:hover li
{
    float: none;
    list-style:none;
    margin:0px;

}
.head_menu ul li:hover li
{
    background:#e7a017;
}
.head_menu ul li:hover li a
{
    color: #FFF;
    padding:0 20px;
    display:block;
    width:80px;
}
.head_menu ul li li a:hover
{
    color:#FFF;
}

これが私のコードで、ドロップダウン メニューは次のようになります。

http://s18.postimg.org/612nvikmh/Untitled.jpg

（なぜ反転したのか申し訳ありませんが、アップロードするとそのように反転しました）

メニュー全体を表示するために左に移動するのを手伝ってくれませんか? 私はこれを1時間解決しようとしてきましたが、インターネット上で修正を見つけることができないようで、今は非常に混乱しています.

みんな、ありがとう！

4

3 に答える 3

0

あなたができることは、負の値をパディングに設定できるので、負の値をmargin-rightに設定することです。次に、右のパディングを に増やして、ドロップダウンが正しく配置されるようにします。

.head_menu ul li:hover ul
{
     display:block;     
     position:absolute;
     margin-right:-20px;
     padding: 0;

}



.head_menu ul li:hover li a
{
    color: #FFF;
    padding:0 20px;
    display:block;
    width:80px;
    padding-right:10px;
}
于 2015-01-23T13:40:39.427 に答える
0

メニューを div コンテナに配置してから、このコンテナfloat:left; を設定するか、幅を設定margin:0 auto;して中央に配置することもできます。position: absoulte;そして、から削除する必要があります.head_menu

http://jsfiddle.net/Ucvbu/

于 2013-08-14T10:45:35.593 に答える