Vertical navigation bar (menu)

by danielkwood

HTML

<html>
<head>
 <title>Basic CSS Layout</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>
 
<div id="section">
 <h2>Welcome to my website</h2>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
 
<div id="footer">
 &copy; 2022.
</div>
</body>
</html>

CSS

body{
  margin: 0;
}

#header{
 background-image: url("background.png");
 background-color: #334a94;
 height: 100px;
 color: #FFFFFF;
 text-align: left;
 padding-left: 20px;
 padding-top: 20px;
 font-family: "Arial";
}
 
#nav{
 background-color: #334a94;
 height: 300px;
 width: 150px;
 float: left;
 padding: 5px;
}
 
#section{
 width: 500px;
 float: left;
 padding: 10px;
}

h2{
  font-family: "Tahoma";
}

p{
  font-family: "Palatino Linotype";
}
 
#footer{
 background-color: #334a94;
 color: #FFFFFF;
 clear: both;
 text-align: center;
 padding: 20px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

li a {
  font-family: Calibri;
  font-size: 14pt;
  font-style:none;
  display: block;
  color: #FFFFFF;
  padding: 8px 0 8px 16px;
  text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #786ED4;
    color: #000000;
}