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

Question

问题是：我想制作一个应该悬停子菜单的“菜单”，如果父激活悬停事件，就像我在这里得到的那样：

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