JSFiddle - React, Tailwind, and code Playground

HTML

<menu>
  <ul>
    <li>Item 1
    <li>Item 2
    <li>BigItm3
    <li>Item 4
    <li>Item 5
    <li>LastItm
  </ul>
</menu>
<p>Text</p>
<p>MoreText</p>
<p style="float:left">Floating</p>
<img style=" left:100px; top: 40px;"
     src="http://tinyurl.com/jaheira-dance">
<form><button>OK</button><br><textarea>text</textarea></form>
<p>HTML content (e.g., loaded + injected via ajax)</p>
<iframe>

CSS

menu:before { content: "Menu"; } /* always display the menu title */

menu {
    top: 0;
    left: 20px;
    background: #fff;
    height:  16px;
    padding: 1px;
    margin:  0px;
    font-height: 10px;
    border: solid 1px gray;
}

menu>ul       { display: none; }  /* hide menu items when closed */
menu:hover>ul { display: block; } /* show items when open */

menu:hover    {
    height:   auto;  /* expand menu */
    position: fixed; /* move other elements behind menu */
}

menu + * { clear: both; } /* move following content below menu */