1

問題は次のとおりです。ここで取得したように、親がホバーイベントをアクティブにした場合、サブメニュー項目をホバーする「メニューシング」を作成したい:

HTML:

<div id="menuitem">Info</div>
<div id="menuitem">Foto</div>
<div id="menuitem">Sicherheit im Web</div>
<div id="menuitem">Projekte
    <div id="submenuitem">SchülerInnenparlament
        <div id="subsubmenuitem">
            <a href="./subsubitem1.html">Aktuelles</a>
        </div>
        <div id="subsubmenuitem">
            <a href="./subsubitem2.html">Text should be written here</a>
        </div>
        <div id="subsubmenuitem">
            <a href="./subsubitem3.html">Text should be written here1</a>
        </div>
    </div>
</div>
<div id="menuitem" title="E-Learning">E-Learning</div>
<div id="menuitem" title="Kontakt">Kontakt</div>

CSS:

#subsubmenuitem
{
    opacity:0;   
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    -ms-transition:.5s;
    transition:.5s;
}
#submenuitem {
    opacity:0;   
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    -ms-transition:.5s;
    transition:.5s;
}
#menuitem:hover #submenuitem {
    opacity:1;
}
#submenuitem:hover #subsubmenuitem {
    opacity:1;
}

http://jsfiddle.net/5Bpur/1/

しかし、div の内容は menuitem の下のスペースを使用しています。他の div を下に移動する必要があります-物を非表示にするだけではありません。誰でもこれの解決策を知っていますか?

編集：

ul
    li
    li
/ul

のほうがいい？..

4

1 に答える 1

1

サブメニューの表示/非表示について話している場合は、次を使用してください。

display: none

display: block

このjsFiddleデモで結果を表示します。

CSS

#subsubmenuitem,
#submenuitem 
{
    display: none;
    opacity:0;   
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    -ms-transition:.5s;
    transition:.5s;
}
#menuitem:hover #submenuitem,
#submenuitem:hover #subsubmenuitem 
{
    display: block;
    opacity:1;
}

または、表示遷移ができないので、こちらのjsFiddleデモのheightand overflowlikeを使ってみてください。

CSS

#submenuitem,
#subsubmenuitem
{
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    -ms-transition:.5s;
    transition:.5s;
    
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
#menuitem:hover #submenuitem,
#submenuitem:hover #subsubmenuitem 
{
    opacity: 1;
    height: auto;
}
于 2013-11-06T18:58:16.390 に答える