Menu

by velo_ninja

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>CSS Menu</title>

<style>

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
margin: 0.5rem;
font-family: "Roboto", sans-serif;
text-align: center;
}

nav{
border: 2px solid #333;
border-radius: 2rem;
margin: 0 auto 1rem;
max-width: 600px;;
font-size: 3rem;
line-height: 7rem;
}

h2{
padding: 1rem;
background-color: gold;
border-radius: 2rem 2rem 0 0;
}

ul{
list-style-type: none;
}

li{
border-top: 1px solid #333
}

li a,
li a:visited{
display: block;
text-decoration: none;
color: #333;
}

li a:hover,
li a:focus{
background-color: #333;
color: whitesmoke;
cursor: pointer;
}

li:last-child a{
border-radius: 0 0 2rem 2rem;
}

</style>

</head>
<body>
<nav>
<h2>CSS Menu</h2>
<ul>
<li><a href="#">Appetizers</a></li>
<li><a href="#">Entrees</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Beverages</a></li>
<li><a href="#">About</a></li>
<ul>
</ul>
</nav>
<p>Learn more about <a href="#">amazing foods</a>!</p>

</body>



</html>