CSS Navigation Bar

CSS Navigation bar refers to a group of links that lead to different pages of a web site. Navbars are either vertical or horizontal. The <nav> element should wrap primary bars such as the main navigation links of web sites. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense

<ul>
  <li><a href="https://www.tutorialsart.com/" target="_blank">Link1</a></li>
  <li><a href="https://www.tutorialsart.com/" target="_blank">Link2</a></li>
  <li><a href="https://www.tutorialsart.com/" target="_blank">Link3</a></li>
  <li><a href="https://www.tutorialsart.com/" target="_blank">Link4</a></li>
</ul>

CSS Navigation Bar- vertical

The vertical navigation bar appears as a regular list of links. The vertical bar is useful for web navigation and can easily become a dropdown menu.

li a {
    display: block;
    width: 50px;
    color: purple;
    background-color: cornsilk;
    text-decoration: none;
}

li a:hover {
    background-color:aliceblue;
}

CSS Navigation Bar-horizontal

CSS creates horizontal navigation bars by:

  • Assigning display: inline property to a list of links.
  • Using float.
ul {
    list-style-type: none;
    margin: 1px;
    padding: 1px;
    overflow: hidden;
    background-color: #8842d5;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 15px 17px;
    text-decoration: none;
}