Question

问题是：如果父母激活了我在这里得到的悬停事件，我想做一个应该悬停在子菜单上的“manuthing”：

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

会更好吗？..

Answer 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演示中的height和overflow。

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;
}

在悬停显示 - div的内容 - 在悬停前不使用空格

1 个答案:

CSS

CSS