<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Our simple navigation.
body {
margin: 0px;
padding: 0px;
}
ul {
width: 150px;
list-style-type: none;
margin: 0px;
padding: 0px;
background: black;
overflow: hidden;
}
li a {
display: block;
background: black;
color:white;
padding: 5px;
text-decoration: none;
}
li a:hover {
background: red;
}
This CSS code will create a vertical navigation menu.
The ul element has a width of 150px and is given a black background color with no bullet points for the list items.
The list items (li) are floated to the left so that they stack vertically, and each anchor (a) element is displayed as a block with a black background, white text, and 5px of padding. When the anchor element is hovered over, it will change its background color to red.
