Vertical menu with dropdown submenu in CSS

Vertical menu with dropdown submenu

Another common type of menu is the dropdown menu. Typically, such menus have only two levels, but there are also multi-level ones, when another one can drop out of a drop-down submenu, and so on.

The layout of such menus is simple – a regular multi-level list. When creating such a menu, you must use absolute and relative positioning.

Typically,  top-level li list items  are positioned relative, while drop-down menus are absolute.

It will look like this.

The position CSS property   specifies the positioning mode of elements. The default value is  static , which means “regular positioning”.

The  relative value  means “relative positioning”. A relatively positioned element can be moved relative to its original position.

The  absolute value of the position  property   sets the element to absolute positioning.

Absolutely positioned elements have the following properties:

  • Drop out of the document flow. The place that they occupied becomes, as it were, empty and is occupied by neighboring elements.
  • The default width depends on the content (rather than stretching to the full available width).
  • They remain in the same place where they were, if the values ​​of the top,  left,  right ,  bottom properties are not set  .

Now let’s get down to business!!!

First, let’s create a template for our future menu.

<div class=”sidebar”>

<ul class=”menu”>

<li class=”p_menu”><a href=”#”>Главная </a>

<ul class=”v_menu”>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

</ul>

< /li >

<li class=”p_menu”><a href=”#”>Поиск</a>

<ul class=”v_menu”>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

</ul>

< /li >

<li><a href=”#”>Регестрация</a></li>

<li class=”p_menu”><a href=”#”>Карта сайта</a>

<ul class=”v_menu”>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

<li><a href=”#”>подменю</a></li>

</ul>

< /li >

<li><a href=”#”>О сайте</a></li>

</ul>

</div>

Done!!!

Now let’s remove the inner and outer indents and markers.

ul{

margin: 0;

padding: 0;

list-style: none;

}

Let’s redecorate our menu.

.menu a{

background:#3d3d3d;

color: #fff;

padding: 10px;

display: block;

border-bottom: 1px solid #666;

transition: 0.5s all;

}

.sidebar{

width: 200px;

margin: 20px;

}

.menu a:hover{

background: #666;

padding: 10px 0 10px 20px;

}

.menu li:first-child a, .menu li .v_menu li:first-child a{

border-radius: 3px 3px 0 0;

}

.menu li:last-child a, .menu li .v_menu li:last-child a{

border-radius: 0 0 3px 3px;

border-bottom: 0;

}

.menu li .v_menu li a {

border-radius: 0;

}

Now let’s deal with the pop-up sub-items.

.p_menu{position: relative;}

.v_menu {

position: absolute;

width: 100%;

left: 100%;

top: -9999px;

opacity: 0;

border-left: 10px solid transparent;

transition: 0.5s opacity;

}

.p_menu:hover .v_menu{

opacity: 1;

top: 0;

}

In principle, the menu is ready, but for the sake of attractiveness, let’s add triangles showing that the menu item has sub-items.

.p_menu::after{

content: “”;

position: absolute;

border:5px solid;

border-color: transparent transparent transparent #eee;

top:1em;

right: 0.7em;

transition: 0.5s;

}

.p_menu:hover::after{

transform: scaleX(-1)

 

Leave a Comment