Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; position: relative; list-style-type: none; } nav ul li:hover { background: rgba(19, 20, 123, 0.67); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 20px 30px; color: #ffffff; text-decoration: none; background-color: rgba(35, 17, 134, 0.8); font-family: sans-serif; } nav ul ul { background: #5f6975; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; position: relative; } nav ul ul li a { padding: 15px 10px; color: #ffffff; text-transform: uppercase; } nav ul ul li a:hover { background: rgba(19, 20, 123, 0.67); } </style> </head> <body> <h1>Dropdown menu with the HTML nav tag:</h1> <nav> <ul> <li> <a href="https://www.w3docs.com/">Home</a> </li> <li> <a href="https://www.w3docs.com/quiz/">Quizzes</a> <ul> <li> <a href="https://www.w3docs.com/quiz-start/html-basic">HTML Bacis</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/css-basic">CSS Bacis</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Bacis</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/php-basic">PHP Bacis</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/es6-basic">ES6 Bacis</a> </li> </ul> </li> <li> <a href="https://www.w3docs.com/snippets">Snippets</a> <ul> <li> <a href="https://www.w3docs.com/snippets/angularjs.html">Angular JS</a> </li> <li> <a href="https://www.w3docs.com/snippets/apache.html">Apache</a> </li> <li> <a href="https://www.w3docs.com/snippets/git.html">Git</a> </li> <li> <a href="https://www.w3docs.com/snippets/linux.html">Linux</a> </li> <li> <a href="https://www.w3docs.com/snippets/nodejs.html">Node.Js</a> </li> <li> <a href="https://www.w3docs.com/snippets/symfony.html">Symfony</a> </li> </ul> </li> <li> <a href="https://www.w3docs.com/tool/">Tools</a> <ul> <li> <a href="https://www.w3docs.com/tools/html-encoder/">HTML ENCODER/DECODER</a> </li> <li> <a href="https://www.w3docs.com/css3-maker/border-radius">CSS MAKER</a> </li> <li> <a href="https://www.w3docs.com/tools/password-generator">PASSWORD GENERATOR</a> </li> <li> <a href="https://www.w3docs.com/tools/image-base64">Base 64</a> </li> <li> <a href="https://www.w3docs.com/tools/code-diff/">CODE DIFF</a> </li> </ul> </li> <li> <a href="https://www.w3docs.com/string-functions/">String Functions</a> <ul> <li> <a href="https://www.w3docs.com/tools/string-revers">STRING REVERSE</a> </li> <li> <a href="https://www.w3docs.com/tools/string-word-count">STRING WORD COUNT</a> </li> <li> <a href="https://www.w3docs.com/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a> </li> </ul> </li> </ul> </nav> </body> </html>