How to build such menus?

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>