Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао

Multilevel Drop Down Menu vertical and horizontal

A unique code allows you to create an unlimited number of attachments without changing the styles.

The peculiarity is that in order to change the vertical menu to horizontal, it is enough to change only one value in styles.

I give only a sketch of the menu. Make your design.

1. Vertical

 

 

2. Horizontal

 

Code:

HTML


<div class="nav">
<ul class="topmenu">
<li><a href="">Meny1</a>
<ul class="submenu">
<li><a href="">Meny 1-2</a>
<ul class="submenu">
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul class="submenu">
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul class="submenu">
<li><a href="">Meny 2-1</a>
<ul class="submenu">
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul class="submenu">
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

I made only two blocks with two levels, but you can copy as many blocks into this code as you need and make as many levels in each block as you need.

The styles for all the blocks that are available and added will be the same.

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*display:block; - vertical,
display:inline-block; - horizontal*/
position: relative;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

I wish you creative success.

Запись опубликована в рубрике Free Scripts Ready Code. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *