1

水平メニューとホバー CSS 効果を備えたレスポンシブ サイトを開発しています。マウスをメニューオプションに合わせると、パディング左を追加して背景画像を配置します。問題は次のとおりです: http://jsfiddle.net/khneM/1/

私のメニュー:

<nav class="menu-principal-container">
    <ul>
        <li ><a title="LA FIRMA" href="#"> LA FIRMA </a>
        </li>
        <li ><a title="DESPACHO" href="#">DESPACHO</a>
        </li>
        <li ><a title="SERVICIOS" href="#">SERVICIOS</a>
        </li>
        <li ><a title="GALERÍA" href="#">GALERÍA</a>
        </li>
        <li ><a title="VARIOS" href="#">VARIOS</a>
        </li>
        <li ><a title="CONTACTO" href="#">CONTACTO</a>
        </li>
        <li ><a title="LOGIN" href="#">LOGIN</a>
        </li>
    </ul>
</nav>

私のCSS：

.menu-principal-container {
    float: left;
    width: 514px;
    margin: 1%;
}
nav ul {
    list-style: none;
    list-style-image: none;
}
li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-color: white;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    margin: 0;
}
a {
    text-decoration: none;
    color: #979797;
}
li:hover {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-width: 4px;
    padding-left: 23px;
    border-color: #FFCE3B;
    text-align: right;
    background: url('http://abogados.drapps.info/wp-content/themes/araluce/img/services.png') no-repeat left top;
}

少し幅で、マウスホバーの最後のオプションで、ダウンしてクリックできなくなります

誰でもこれを行うことについて何か考えがありますか?

任意のアイデアをいただければ幸いです!!!

ありがとうございました

4

2 に答える 2

1

私が知っているように、これを行うのは難しい..これを行うには、liオプションメニューに固定幅を設定する必要があり、cssアニメーションを忘れます。

于 2013-01-21T12:10:15.647 に答える
0

このルールでパディングを適用するだけです

li:hover a {
  padding-left: 23px;   
}

から削除しli:hoverます。(おそらく、リンクに対しても padding-left のアニメーションを定義する必要があるかもしれません)

例: http://jsfiddle.net/32MFQ/1/

于 2013-01-21T11:28:56.607 に答える