Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> #wrap { width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; } .navbar { height: 50px; padding: 0; margin: 0; position: absolute; } .navbar li { height: auto; width: 135px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; } .navbar a { padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; } .navbar li:hover, a:hover { background-color: #444444; } .navbar li ul { display: none; height: auto; margin: 0; padding: 0; } .navbar li:hover ul { display: block; } .navbar li ul li { background-color: #444444; } .navbar li ul li a { border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; } .navbar li ul li a:hover { background-color: #a3a1a1; } </style> </head> <body> <h2>Example of creating a drop-down navigation menu</h2> <div id="wrap"> <ul class="navbar"> <li> <a href="#">Home</a> </li> <li> <a href="#">Books</a> <ul> <li> <a href="https://www.w3docs.com/learn-html.html">Learn HTML</a> </li> <li> <a href="https://www.w3docs.com/learn-css.html">Learn CSS</a> </li> <li> <a href="https://www.w3docs.com/learn-javascript.html">Learn JavaScript</a> </li> <li> <a href="https://www.w3docs.com/learn-php.html">Learn PHP</a> </li> </ul> </li> <li> <a href="#">Quizzes</a> <ul> <li> <a href="https://www.w3docs.com/quiz-start/css-basic">CSS Basic</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/php-basic">PHP Basic</a> </li> <li> <a href="https://www.w3docs.com/quiz-start/javascript-basic">JavaScript Basic</a> </li> </ul> </li> <li> <a href="#">Tools</a> <ul> <li> <a href="https://www.w3docs.com/tools/html-geometric-images/">Geomatric Images</a> </li> <li> <a href="https://www.w3docs.com/tools/color-picker">Color Picker</a> </li> <li> <a href="https://www.w3docs.com/tools/password-generator">Password Generator</a> </li> <li> <a href="https://www.w3docs.com/tools/editor">HTML Editor</a> </li> <li> <a href="https://www.w3docs.com/tools/image-base64">Base 64</a> </li> </ul> </li> <li> <a href="#">Snnipets</a> <ul> <li> <a href="https://www.w3docs.com/snippets/css.html">CSS</a> </li> <li> <a href="https://www.w3docs.com/snippets/javascript.html">JavaScript</a> </li> <li> <a href="https://www.w3docs.com/snippets/angularjs.html">Angular</a> </li> <li> <a href="https://www.w3docs.com/snippets/git.html">Git</a> </li> </ul> </li> <li> <a href="#">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-url-encoder">URL Encoder</a> </li> <li> <a href="https://www.w3docs.com/tools/string-remove-empty-lines">Empty Lines Remover</a> </li> <li> <a href="https://www.w3docs.com/tools/string-word-count">String Word Count</a> </li> </ul> </li> </ul> </div> </body> </html>