スライディングドア透明なオーバーレイ

Question

.menu li { 
    list-style:none; 
    float:left; 
    padding-right:20px; 
    padding-top:25px; 
} 

.menu li a, .menu li a:visited { 
    color:#ffffff; 
    font-size:12px; 
    text-decoration:none; 
    background:url(images/menu_hover_right.png) top right no-repeat; 
    padding-right:10px; 
} 

.menu span { 
    background:url(images/menu_hover.png) top left no-repeat; 
    padding-left:10px; 
    padding-top:2px; 
} 

誰もが隣り合わせにする方法を知っています。どちらのイメージもラウンドサイドで透明です。

。

Answer 1

問題は、実際に画像を後方に保存していることです。左のイメージは、短いイメージで、右のイメージは拡張されたイメージでなければなりません。あなたがいることを変更したら、あなたのCSSは、右の場所に分類する必要があります

.menu { list-style: none; } 
.menu li { 
    float: left; 
    font-size: 12px; 
    margin: 25px 10px 0; } 
.menu li a { 
    background: none 0 0 no-repeat; 
    text-decoration: none; 
    padding: 0 0 0 10px; 
    display: inline-block; } 
.menu li a:hover { 
    background-image: url(images/menu_hover.png); 
    color: #ffffff; } 
.menu li a span { 
    background: none 100% 0 no-repeat; 
    float: left; 
    padding: 2px 10px 0 0; 
    display: block; } 
.menu li a:hover span { background-image: url(images/menu_hover_right.png); } 

それは.menu li aと.menu li a spanの両方の内側に高さを設定することは通常のも良いでしょう。ブラウザの不一致のため、パディングは固定高さを設定する非常に信頼性の低い方法です。