0

私がWordpressで構築したサイトには、リンクの周りに灰色のボックスがあり、それらにカーソルを合わせると青色に変わり、ボックスから矢印が下がっています。私の問題は、それらが絶対に配置されているため、ナビゲーションリンクが長いか短い場合、矢印がナビゲーションボックスの中央に配置されないことです。純粋なCSSで効果を出すことができました。これが私のコードです。

HTML

<div id="nav">

            <div class="navwrapper">
                    <div class="main-nav">
                        <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
                    </div>
                    <div class="clearfix"></div>
            </div>
        </div>

CSS

.main-nav ul a{
    color: #0f0f0f;
    text-decoration: none;
}


.main-nav ul li a{
    color: #0f0f0f;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #efefef;
    padding:  10px;
}


.main-nav ul a:hover{
    color: #fff;
    text-decoration: none;
    background-color: #5dbbe0;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
}


.main-nav ul li {
    float: left;
    margin:  25px 0 0 15px;
}


.main-nav ul a:hover:after{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 18px;  
    top: 36px;
    text-align: center;
    border-width:10px 10px 0;
    border-style: solid;  
    border-color: #5dbbe0 transparent;  
    display: block;
}
4

1 に答える 1

0

現在の三角形の使用に関する問題の1つは、無効なCSSであるインライン要素内にブロック要素をネストすることです。（ただし、ブロック要素内にインライン要素をネストすることはできます）

display：block ;を使用する必要があるため。CSS3の三角形を形成するために、親要素にdisplay：blockを追加することもできます。

また、三角形の位置をアンカー要素に対して相対的に配置したかったので、 position：relativeに変更しました。

最後にmargin：0autoを使用します。三角形を水平方向に揃えます。これがナビゲーションであるため、各アンカーに同じ高さを使用していると想定しているので、最後に、bottom：-20pxを使用して三角形の垂直位置を調整します。

こちらのデモをご覧ください：http：//jsfiddle.net/radialglo/Am48P/7/

デモンストレーションの目的で、 a：hover：afterをa：afterに変更しました。

    .main-nav ul a {
        色：＃0f0f0f;
        テキスト装飾：なし;
    }


    .main-nav ul li a {
        色：＃0f0f0f;
        テキスト装飾：なし;
        -webkit-border-radius：10px;
        -moz-border-radius：10px;
        border-radius：10px;
        背景色：#efefef;
        パディング：10px;
        表示ブロック;
    }


    .main-nav ul a：hover {
        色：#fff;
        テキスト装飾：なし;
        背景色：＃5dbbe0;
         -webkit-border-radius：10px;
        -moz-border-radius：10px;
        border-radius：10px;
        位置：相対;
    }


    .main-nav ul li {
        フロート：左;
        マージン：25px 0 0 15px;
        リストスタイル：なし;
    }


    .main-nav ul a：after {  
        コンテンツ： ' ';  
        / *位置：絶対; * /
        位置：相対;
        下：-20px;
        /*必要に応じて垂直方向の高さを調整します*/
        幅：0;  
        高さ：0;  
        / *左：18px; * /  
        / *トップ：36px; * /
        text-align：center;
        border-width：10px 10px 0;
        ボーダースタイル：ソリッド;  
        境界線の色：＃5dbbe0透明;  
        マージン：0自動;
        表示ブロック;
    }
于 2012-07-19T05:18:45.333 に答える