Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu

Posted on : Wed, 17th Aug 16 12:56 pm (Updated on : Wed, 17th Aug 16 12:56 pm) GMT
Author : Code2care

Let's create a very simple Lightweight Pure CSS based Vertical Navigation Menu. We will not be using any jQuery or JavaScript.

  1. First let us create a simple unordered list <ul> with list items <li> that will be our navigation bar options/links.

    Step 1 : Code Language : HTML
    <ul class="nav">
      <li class="nav-logo">LOGO</li>
      <li class="nav-option">JAVA</li>
      <li class="nav-option">PHP</li>
      <li class="nav-option">CSS</li>
      <li class="nav-option">JavaScript</li>
      <li class="nav-option">SharePoint</li>
      <li class="nav-option">Android</li>
    If you see the output of this on a web browser you would see all the elements as unordered list with bullets (we need to add CSS right?).

    STEP 1 : Output

  2. Now lets add CSS properties to nav class : Its important to set width to be 100% set margin and padding as 0.

    Step 2 : Code Language : Css
    .nav {
        margin: 0;
        padding: 0;
        border-top:1px solid #cfcfcf;
        border-bottom:1px solid #cfcfcf;

    Step 2 : Output

  3. To display list items next to each other we need to use property display:inline

    Step 3 : Code Language : Css
    .nav li {
        display: inline;
        line-height: 37px;

    CSS Menu Output Step 3

    Step 3 Output : Nav Options now displayed next to each other.

  4. We are almost done, lets remove anchor tag text decoration and add some hover effects.

    Step 4 : Code Language : CSS
    .nav-logo {
        border-right:1px solid #b8b8b8;
        border-left:1px solid #ccc;
    .nav-logo a {
    .nav-option a {
    .nav-option {
    .nav-option:hover {

Final Demo

Note : This is not a responsive design navigation menu.

We are operating with limited resources due to COVID-19 - Stay Safe!

We stands in support of racial equality!

Follow us : Facebook - Twitter