Make a dropdownmenu without a list in CSS

Question

I want to make a dropdown menu with CSS. I know a little bit how to make it but the HTML structure is different.
My structure is like that:

So in the end I would like to have it work like that:
-When you hover over menu1, the first submenupanel should dropdown with its submenulink.

the CSS of submenu_panel is looking like that:

   .submenu_panel {
    width: 100%;
    height: 100%;
    background: gray;
    height:0px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

Can anyone help me to make my dropdown menu?

This is a short version of it in jsfiddle https://jsfiddle.net/4bjk8opa/

Answer 1

Will this work with you.

Fiddle

 ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}