0

ここで作成しようとしているのは単純な水平 css メニューですが、ユーザーがリスト内の項目にカーソルを合わせるたびに、その項目の上に小さな三角形が表示されるようにします。遠い HTML:

<div id="navbar2">
        <div id="navholder">
            <ul id="nav2">
                   <li>
                        <a href="#">category one</a>
                   </li>
                   <li>
                        <a href="#">section two</a>
                   </li>
                   <li>
                        <a href="#">articles</a>
                   </li>
                   <li>
                        <a href="#">posts here</a>
                   </li>
                   <li>
                        <a href="#">category two</a>
                   </li>
            </ul>
        </div>
  </div>

そしてそれに適用されるcss：

ul#nav2
{
    background:url('images/redbar.png');
    list-style-type:none;
    height:50px;
}
#navbar2 ul li
{
    height:50px;
    display:inline;
    line-height:35px;
    padding-left:19px;
}
#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background:url('images/Project_0040_Layer-21.png') no-repeat;
 }
 #navbar2 ul li a 
{
    color:#fff;
    text-decoration:none;
    font-size:10pt;
    }

そして、背景の位置を上部中央に指定しても、まったく表示されません...何が間違っていますか? jsfiddle へのリンク: http://jsfiddle.net/wWMjF/1/、基本的に、テキストのすぐ上にある小さな三角形が必要で、側面ではなくテキストを指しています。

4

3 に答える 3

3

背景スタイルを 1 行に連結します。

#navbar2 ul li:hover
{  
    height:50px;
    background:url('http://i.imgur.com/dyj8m.png') no-repeat center 0;
}

更新されたフィドルのサンプルを参照してください。

于 2012-07-19T21:37:07.090 に答える
0

私はあなたのためにこれをノックアップしました。何かの役に立つかもしれません。

http://jsfiddle.net/wWMjF/11/

于 2012-07-19T21:54:27.027 に答える
0

省略形のプロパティを使用するbackgroundと、指定されていないすべてのプロパティが初期値に設定されます。

'background' プロパティは、ほとんどの背景プロパティをスタイル シートの同じ場所に設定するための簡略化されたプロパティです。[...] 有効な宣言が与えられると、各レイヤーの省略形は、最初に「background-image」、「background-position」、「background-size」、「background-repeat」、「background-」のそれぞれに対応するレイヤーを設定します。 origin'、'background-clip'、および 'background-attachment' をそのプロパティの初期値に設定し、宣言でこのレイヤーに指定された明示的な値を割り当てます。

どちらかを使用

#navbar2 ul li:hover 
 {  
    height:50px;
    background-position: 50% 0%;
    background-image:url('images/Project_0040_Layer-21.png');
    background-repeat: no-repeat;
 }

また

#navbar2 ul li:hover 
 {  
    height:50px;
    background:url('images/Project_0040_Layer-21.png') no-repeat 50% 0%;
 }

これを避けるために。

于 2012-07-19T21:37:30.660 に答える