Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #981816; } </style> </head> <body> <h2>Navigation Menu Example</h2> <p> You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally. </p> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="https://www.w3docs.com/tool/">Tools</a> </li> <li> <a href="https://www.w3docs.com/snippets">Snippets</a> </li> <li> <a href="https://www.w3docs.com/quiz/">Quizzes</a> </li> <li> <a href="https://www.w3docs.com/string-functions/">String Functions</a> </li> </ul> </body> </html>