Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document</title> <style> * { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } body { background: url("https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80") center; background-size: cover; min-height: 600px; font-family: "Helvetica Neue", sans-serif; } nav { text-align: center; } .menu { display: inline-block; } .menu > li { float: left; color: #e298e1; width: 140px; height: 40px; line-height: 40px; background: rgba(0, 0, 0, 0.7); cursor: pointer; font-size: 17px; } .sub-menu { transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; } .sub-menu li { font-size: 14px; background: rgba(0, 0, 0, 0.8); padding: 8px 0; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; } .sub-menu li:last-child { border-bottom: 0; } .sub-menu li:hover { background: black; } .menu > li:hover .sub-menu li { transform: scale(1); } .menu > li:hover .sub-menu { transform: scale(1); } </style> </head> <body> <nav> <ul class="menu"> <li> Italy <ul class="sub-menu"> <li>Rome</li> <li>Milan</li> <li>Venice</li> <li>Lacio</li> <li>Florence</li> </ul> </li> <li> France <ul class="sub-menu"> <li>Paris</li> <li>Bordeau</li> <li>Marseille</li> <li>Toulouse</li> </ul> </li> <li> Spain <ul class="sub-menu"> <li>Madrid</li> <li>Valencia</li> <li>Barcelona</li> <li>Seville</li> <li>Bilbao</li> </ul> </li> <li> Russia <ul class="sub-menu"> <li>Moscou</li> <li>Saint Petersburg</li> <li>Tula</li> <li>Chekhov</li> </ul> </li> <li> Allemande <ul class="sub-menu"> <li>Berlin</li> <li>Munich</li> <li>Frankfurt</li> <li>Hamburg</li> <li>Dresden</li> </ul> </li> </ul> </nav> </body> </html>