0

ドロップダウンメニューを作成しています。これまでのところすべてが機能しています。動作していないことの1つは、ドロップダウンメニューが表示されたときの不透明度の変化です。また、高さの流れを追加したかった。つまり、全体の高さは0.5秒後にそれ自体が構築されているように見えるはずです。

今、私は移行でこれらのことを達成するかもしれないと思いましたが、どういうわけかそれはまったく機能していません。

#nav-primary ul ul{
    position:absolute; 
    left:0px;
    opacity: 0;
    transition:opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    z-index:497;
}

#nav-primary ul li:hover > ul { 
    opacity: 1; 
    position:absolute; 
    top:100%; 
    left:0; 
 }

基本的に私はwordpressのwp_nav_menuを使用しています：

wp_nav_menu( array( 'theme_location' => 'menu', 
                    'link_before' => '<span>',
                    'link_after' => '</span>',) );

構造は次のようになります。

ul ...                         // main-menu
    li ...
        ul ...                 // sub-menu
            li ...
                <a>
                <span>
                </a>
4

1 に答える 1

0

CSSコードでは、最上位の親ul要素にポジショニングを適用することはありません。多分それはタイプミスですか？

最初の行は次のとおりです。

#nav-primary ul ul{

しかし多分あなたは意味しました：

#nav-primary ul {

最善の最初のステップは、親ulを設定することです。親のulとliにプロパティを配置しないと、子のliは何に対して配置されているのかわかりません。

他のデフォルトのスタイルがいくつかあると仮定すると、必要なのは次のようなものだけです。

#nav-primary ul {
    position:relative; 
}

それをあなたがすでに持っているもののいくつか、そして他のいくつかの基本的なスタイルと組み合わせると、あなたはあなたの道を進んでいます：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: block;
    width: 300px;
    height: 30px;
    line-height: 30px;
    color: black;
    padding: 5px;
    background: #aaa;
}

ul li li {
    background: #ccc;
}

#nav-primary ul {
    position:relative;
}

#nav-primary ul > li > ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    transition:opacity .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    opacity: 0;
}

#nav-primary ul > li:hover > ul { 
    opacity: 1; 
}

ここで実際の動作を確認してください：http：//jsfiddle.net/jonthomas/27Ymw/1/

お役に立てば幸いです。

于 2013-02-02T06:47:42.483 に答える