Hello I want to create a menu with a sub menu. I have been on google but I can not find a solution. Have a solution or tutorial to create a menu and sub menu like this HTML code <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> <link rel="icon" type="image/png" href="images/favicon.png" /> <title>menu</title> <link rel="stylesheet" href="css/styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="row"> <div class="col"> <!-- Affichage menu et sous menu --> <nav class="style-nav"> <ul> <li><a href="#">Page1</a></li> <li class="current"><a href="#">Page2</a> <ul class="sous-menu"> <li><a href="#">sousPage2.1</a></li> <li><a href="#">sousPage2.2</a></li> </ul> </li> <li><a href="#">Page3</a></li> <li><a href="#">Page4</a></li> </ul> </nav> </div> </div> <hr> </body> </html> CSS code @charset "UTF-8"; /* CSS Document */ html, html * { padding: 0; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif"; background-position: 0% 0%; } body { margin-left: auto; margin-right: auto; background: #FFFFFF; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; } .style-nav ul { list-style-type: none; } .style-nav ul li a { text-decoration: none; color: #FFFFFF; text-align: center; display: block; text-transform: inherit; padding: 5px 25px; background-color: #888; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; /*ul.white-space-fix li */ margin-right: -5px; } .style-nav ul li a:hover { color: #FFFFFF; background-color: #444; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .style-nav .current a { background-color: #444; } .sous-menu { display: none; } .sous-menu li:hover .sous-menu{ display: inline; position: absolute; z-index: 100000; } .col { width: 100%; } .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } /*Tablet View*/ @media (min-width: 768px){ body { max-width: 778px; } .style-nav ul li { display: inline-block; } .style-nav ul { text-align: center; } } /*Desktop View*/ @media (min-width: 1024px){ body { max-width: 1200px; } .style-nav { padding: 20px 0px 0px 0px; float: right; } .style-slogan { float: right; width: 500px; padding-top: 20px; } } Thank you for your help
... View more