CSS Vertical Navigation with Teaser [MenuBar]


Pure CSS vertical navigation menus with the teaser:  This article explains how to create vertical navigation menus without jquery or javascript. Yes, we are going to build vertical menus with CSS only. The navigation menu of a website plays a significant role in the website's usability and User Experience. Without menu navigation site is like content all but useless. Easy navigation throughout the whole website is something every website needs. 

If you are looking for a CSS vertical menu, then you have come to the right place. On the internet, you will find many different styles of Menubar, which may be created using jquery/ javascript. It is okay to create menus with the use of jquery, but what if we can create navigation menus with pure CSS.

Now we create a simple CSS menu bar with a teaser .i.e on menu hover we show some related data.

Steps to create vertical menu CSS with a teaser

  1. Add HTML markup UL, LI
  2. CSS: span data display on hover.
Example : css-vertical-menu-bar-3

# HTML Markup:  Adding UL, Li, A, Span tag.

Here we are adding UL, LI, A, and Span tags for creating menu items. This is how our HTML looks like as shown below.
<ul class="menu-navigation">
  <li><a href="#"># jQuery
  <span>Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
  <li><a href="#"># Angular JS
  <span>Persona que se dedica a la impren desconocido usó una galería de textos y los mezcló de tal manera que. </span>
  <li><a href="#"># MS SQL
  <span>Documentos quedando esencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  <li><a href="#"># JavaScript
  <span>Creaciónesencialmente igual ás recientemente con software de autoedición, como por ejemplo. </span>
  <li><a href="#"># Asp.net MVC
  <span>Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, </span>

CSS: On hover show Span data.

Herewith this pure CSS, we able to create vertical navigation menu CSS
ul.menu-navigation {
  font-size: 1.2em;
  float: left;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #e25454;
  border-bottom: 1px solid #BF4E4E;
  border-top: 1px solid #BF4E4E;

ul.menu-navigation li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 205px;
  padding: 10px 10px 10px 35px;
  border-top: 1px solid #BF4E4E;
  border-bottom: 1px solid #BF4E4E;

ul.menu-navigation li span {
  display: none;

ul.menu-navigation li a:hover {
  background-color: #BF4E4E;
  border-top: 1px solid #BF4E4E;

ul.menu-navigation li a:hover span {
  display: block;
  font-size: 0.8em;
  padding: 10px 0;

View Demo

Conclusion: This post explains how to create vertical navigation menus with teasers using pure CSS. .i.e no Javascript or jquery is required to create the stylish fancy menu bar.  

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *


  1. Anjan Kant 05/04/2016 07:42:57
    Very well explained about CSS Vertical Navigation, helped me it out.
  2. Satinder singh 05/04/2016 16:25:13
    Thanks for sharing Anjan