OnHover show-div的内容-悬停前不使用空格

Question

The problem is: I want to make a "menuthing" that should hover the submenuitem, if the parent activate a hover event like I got it here:

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/

But the content of the div is using the space under the menuitem. It should move the other divs down - not just make the thing invisible. Anybody know a solution for this one?

Edit:

ul
    li
    li
/ul

would be better?..

Answer 1

If you are you talking about showing/hiding the submenus, just use:

display: none

display: block

View results in this jsFiddle demo.

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

---

Or since display can't be transitioned, try using height and overflow like in this jsFiddle demo.

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