title: CSS Only Sliding Menu
body: <p>Please see link below:</p>
  
  <p><a href="http://cssmenumaker.com/builder/111528" rel="nofollow">http://cssmenumaker.com/builder/111528</a></p>
  
  <p>I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.</p>
  
  <p>Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.</p>
  
  <p>I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.</p>
  
  <p>Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.</p>
  
  <p>My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.</p>
  
  <p>Much obliged to any help!</p>