1 ответ
nav {
background-color: #eee;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
background-color: #eee;
}
nav a {
display: block;
padding: 0 5px;
color: #000;
font-size: 20px;
line-height: 30px;
text-decoration: none;
}
nav a:hover {
color: #fff;
background-color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
position: relative;
min-width: 120px;
float: none;
display: list-item;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
<nav>
<ul>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2(наведи)</a>
<ul>
<li><a href="#">Меню 2.1</a></li>
<li><a href="#">Меню 2.2</a></li>
<li><a href="#">Меню 2.3 (наведи)</a>
<ul>
<li><a href="#">Меню 2.3.1</a></li>
<li><a href="#">Меню 2.3.2</a></li>
<li><a href="#">Меню 2.3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Меню 3</a></li>
</ul>
</nav>
Реализация на чистом css.