Vertical Popup Menu

Vertical Drop Down Menu

In the example below, a simple drop-down menu is designed. Desired features can be changed easily.

Here the dropdown is enclosed in a box (div) where the sideMenu class selector is applied. While creating styles, the elements in the yanMenu are formatted so that ul, li and a's in other places are not affected.

If we explain some places;

.leftMenu ul { }  Formats all ul tags in the leftMenu.

.leftMenu li { }  Formats all li tags in the leftMenu.

. leftMenu li ul { }  Formats the ul tags that are inside the leftMenu and also between the li tags. These ul tags are the lists that will open sideways when the relevant element is hovered. By setting display: none here , these lists are not normally visible. In addition, position and location settings were made and their locations were adjusted.

.leftMenu li:hover ul { }  formats the ul tag in the leftMenu that is in the hovered li. By making Display:block, the list in the hovered li becomes visible.

.leftMenu li a { }  Formats the a tags inside the leftMenu and between the li tags.

.leftMenu li a:hover { }  Formats the hover states of the a tags inside the leftMenu and between the li tags.

The best to understand in this example are where position:relative and position:absolute apply. Let's explain these parts as follows:

The ul elements (.leftMenu li ul ) that will open to the side are hidden at first and do not take up space. However, hovering over that li will become visible and other li elements will slide down as they take up space as well. So we have to apply position:absolute to these elements . However, this time, these elements will become independent of their location and their positions will be adjusted according to the window edges. In other words, when top:0 is called, it will be placed at a distance of 0 pixels from the top edge of the window. To prevent this, position:relative is applied to li elements . In this way, the contents of those li's will stay connected to the li's in terms of location, and those that are absolute will not take up space in that region and will not cause any slippage.

Check out the dropdown menu example below. A sub-list with ul has been created inside the li tags, which will open another menu when hovering over them. And these inner ul tags are made invisible by making display:none.

For example, its working state and full codes are available in the Topic Examples section.

Html Part

Css Part

EXERCISES