DEV Community

Kaveh Sabouri
Kaveh Sabouri

Posted on

How to make a simple menu with html and css

#css #html #beginners #tutorial

We Want Make this menu with html and css:

Image description

html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <br> <a href="#">Topic 1</a> <a href="#">Topic 2</a> <a href="#">Topic 3</a> <a href="#">Topic 4</a> <a href="#">Topic 5</a> </nav> </body> </html>
Enter fullscreen mode Exit fullscreen mode

css:

*{ margin: 0; padding: 0; } body{ background-color: #EE9B00; } nav{ background-color:#001219; padding-bottom: 20px; text-align: center; } nav a{ color:white; text-decoration: none; font-family:Arial, Helvetica, sans-serif; margin-left: 50px; margin-top: 20px; border-radius: 8px; } a:hover{ transition: 2.5; color:red; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)