html tags in opening drop-down menu

Question

In a parent div, there is a "menu div" as I have shown in the picture. By clicking on the "menu" and a function in javascript, another window opens that contains the menu items.

As it is presented, the "menu window" exceeds the parent div margins. For the menu part, I have considered two different tags. One when it is in the parent div and the other when it opens with the menu items and with padding and margin settings in css I have put them exactly in the same position so that when the window opens, the observer does not recognize any displacement for "MENU".

Is there a simpler way to do this? Can I have only one tag for MENU?

Answer 1

Yes there is a simpler way than using 2 different menu tags.

You will have 1 menu tag (with some test for the menu) and put your menu items inside your menu tag (but don't display them - display:none ). When user clicks on the menu, change the display of your items to block ( display:block ) and make sure your menu will show the items outside it's original size.