CODEWITHSUNDEEP
htmlcssdrop-down-menu
aha364636
aha364636

Reputation: 363

Make a dropdownmenu without a list in CSS

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:

enter image description here

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/

Upvotes: 3

Views: 82

Answers (2)

Jason Gilmour
Jason Gilmour

Reputation: 110

You'll either have to change your HTML structure or use JavaScript to achieve this. You're also declaring height twice for your .submenu_panel.

Steevan's Fiddle shows how you'd have to change your structure to make it work with pure CSS.

To make it work with jQuery, add an ID to the link you want to show #pn1Submenu when hovered, in this case I've used "target":

JS:

    $('#target').on('click', function() {
        $('#pn1Submenu').show();
    });

HTML:

    <a href="/" id="target" class="menu_link"...

Upvotes: 0

Steevan
Steevan

Reputation: 826

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}

Upvotes: 3

Related Questions