8 Simple Css Vertical menu bar for blogger

CSS Verticle menu, Verticle menu blogger, 3d Verticle menu,

Sharing The first collection of Vertical Navigation menu bar for blogger. Today I give you some awesome designed vertical menu. This menu bar designed by Cssmenumekar. I am modify these and make comfortable for your blogger site. I am tried hard to share the best menu bar for you. Hope you like and enjoy this.

How to add Vertical Navigation CSS Menu on your blogger/blogspot site

1.To add any menu bar from below first copy the css code of your selected menu.
2.Then go to your blogger template and find ]]></b:skin>
3.Past your copied css code just above of ]]></b:skin>
4.Now save your template.

After adding css code now you need to add html code to show your menu bar on blogger.

1. Go to your blogger layout option> Add a gadget > Html/javascript > and paste the html codes and save it.
2. Now you need to edit the html codes:

   <li><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Menu 1</span></a></li>
   <li><a href='#'><span>Menu 2</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>

Remove # and give your page url and change Home, Products, Contact etc and give the linked page name on it.

Note: if the menu is not fitted on your slide bar actual size then simply comment on the bottom. I will try to made it comfortable with your site.

1. Blue & White Menu

css vertical menu, free css vertical menu bar, simple menu bar

CSS CODE:

 /*Gt Stylesheet */
#cssmenu > ul{
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu > ul {
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #fff;
			border-bottom: 1px dotted #d9d9d9;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family:  Helvetica, Arial, sans-serif;
			color: #3dafea;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 0 #fff;
			font-size: 13px;
			font-weight: 300;

			/* Background & effects */
			background: #eaeaea;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
			background: #54cdf1;
			background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
			background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #3dafea; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #fff;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .25);
		}

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}

HTML CODE:

 <div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

2. Black & Yellow Menu

CSS CODE:

 /* GT stylesheet */
ul#cssmenu > ul, #cssmenu > ul ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu > ul, #cssmenu > ul ul {
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #3a3a3a;
			border-bottom: 1px dotted #1b1b1b;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
			color: #d8d8d8;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 1px #000;
			font-size: 13px;
			font-weight: 300;

			/* Background & effects */
			background: #282828;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
			background: #d4b800;
			background: -webkit-linear-gradient(bottom, #d4b800, #f6d600);
			background: -ms-linear-gradient(bottom, #d4b800, #f6d600); 
			background: -moz-linear-gradient(bottom, #d4b800, #f6d600);
			background: -o-linear-gradient(bottom, #d4b800, #f6d600);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #d8d8d8; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #000;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .3);
		}

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home<span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

3. Black & Blue Menu

CSS CODE:

 /* Some stylesheet reset */
#cssmenu  > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}/* The container */
#cssmenu  > ul {
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu  > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu  > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #3a3a3a;
			border-bottom: 1px dotted #1b1b1b;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family: Helvetica, Arial, sans-serif;
			color: #d8d8d8;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 1px #000;
			font-size: 13px;
			font-weight: 300;			

			/* Background & effects */
			background: #282828;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu  > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu  > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
			background: #54cdf1;
			background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
			background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
			background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu  > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #d8d8d8; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu  > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #000;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .3);
		}

	
		/* THE SUBMENUS */
		#cssmenu  > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu  > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

4. Red & White Menu

CSS CODE:

/* Some stylesheet reset */
#cssmenu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu > ul{
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #fff;
			border-bottom: 1px dotted #d9d9d9;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family:  Helvetica, Arial, sans-serif;
			color: #e4433c;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 0 #fff;
			font-size: 13px;
			font-weight: 300;

			/* Background & effects */
			background: #eaeaea;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li a:hover, #cssmenu > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
			background: #f23f37;
			background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);
			background: -ms-linear-gradient(bottom, #f23f37, #f45d57); 
			background: -moz-linear-gradient(bottom, #f23f37, #f45d57);
			background: -o-linear-gradient(bottom, #f23f37, #f45d57);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu > ul .has-sub >a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #e4433c; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu > ul .has-sub >a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #fff;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .25);
		}

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

5. Vertical-Massive-Blue

CSS CODE:

 #cssmenu {
	background: #333;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
}
#cssmenu li {
	font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
       list-style: none;
}
#cssmenu a {
	background: #333;
	border-bottom: 1px solid #393939;
	color: #ccc;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
#cssmenu a:hover {
	background: #2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQifMO6JwWYLC8s2gHp8PtvJipuR7fwFHJaGKqctMKHWueSF-LbPr0WKxGInI5hcM0SwN0XBPp9gmXPg2_rrXQ1t1Kd1PiwG-MWHm0LZ7UZJCdCPqQWWmJUYg8Hq498JlCk-byjYJBmvKm/s1600/hover.gif') left center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

6.Grey Hat Menu

CSS CODE:

 
#cssmenu {
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cssmenu{
	width: 193px;
}
#cssmenu ul{
	list-style: none;
	text-indent: 0px;
}
#cssmenu li{
	margin-top: 3px;
}
#cssmenu a{
	font: 12px Verdana;
	padding: 4px;
	color: #646464;
	display:block;
	padding: 6px 30px;
	height: 20px;
	text-decoration: none;
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXg946g6BBGrVdanO82PtA-A_ZZ7dXOFhm8iK7LJvH2iP9Q3wbFdfAkZRlG4amMz9cZzxLnc0w_JDHZ80IYUnbIah4ShyphenhyphenJnF6iJC_T6JafrUgEzs0VuCEVUbW5CGVf8vxEeVm8kQz8Er7/s220/background.gif');
}
#cssmenu a:hover{
	background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9uqIcIEkNNEF-J6XHZxiSQmRxHaVpbUJ1dolhtfsvHi9QKiOIsDAeR7bYf_RJdwzEeJaYq9WZXs4canfS3fIA_UfDehp9KlsVVoPYwfMH3AIkT_94JnLJ-MYUJZCnfKdCiZQVeyezN8ov/s220/highlight.gif') no-repeat right;
	padding: 6px 40px;
}:148px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9uqIcIEkNNEF-J6XHZxiSQmRxHaVpbUJ1dolhtfsvHi9QKiOIsDAeR7bYf_RJdwzEeJaYq9WZXs4canfS3fIA_UfDehp9KlsVVoPYwfMH3AIkT_94JnLJ-MYUJZCnfKdCiZQVeyezN8ov/s220/highlight.gif) no-repeat;color:#b18211;}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

7. Bitbox Menu

CSS CODE:

 

#cssmenu {
	width: 200px;
	border-style: solid solid none solid;
	border-color: #94AA74;
	border-width: 1px;

	}
#cssmenu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
	
#cssmenu li a {
	height: 32px;
  	height: 24px;
	text-decoration: none;
	font-weight:normal;
	}	
	
#cssmenu li a:link, #cssmenu li a:visited {
	color: #FFFFFF;
	display: block;
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphWOHU-h3ZZ2TFpEeTtV5pBqmyBuu_byPf2DRtX508e5mW1EmWxHC0cBrl9szU31P5UD41-U1HL6sEJcP63inXOUERVs8eWtzNDq2ipu3qKNF6_mxi84DKQwJxRteCkfe_NkJUJZbUp2T/s1600/v6.gif);
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}
	
#cssmenu li a:hover {
	color: #666666;
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphWOHU-h3ZZ2TFpEeTtV5pBqmyBuu_byPf2DRtX508e5mW1EmWxHC0cBrl9szU31P5UD41-U1HL6sEJcP63inXOUERVs8eWtzNDq2ipu3qKNF6_mxi84DKQwJxRteCkfe_NkJUJZbUp2T/s1600/v6.gif) 0 -32px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}
	
#cssmenu li a:active {
	color: #666666;
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphWOHU-h3ZZ2TFpEeTtV5pBqmyBuu_byPf2DRtX508e5mW1EmWxHC0cBrl9szU31P5UD41-U1HL6sEJcP63inXOUERVs8eWtzNDq2ipu3qKNF6_mxi84DKQwJxRteCkfe_NkJUJZbUp2T/s1600/v6.gif) 0 -64px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

8.Salmon Menu

Simple Css Vertical menu bar, vertical menu bar examples

CSS CODE:

 
/* GT stylesheet */
#cssmenu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	line-height: 1;
}

/* The container */
#cssmenu > ul {
	display: block;
	position: relative;
	width: 150px;
}

	/* The list elements which contain the links */
	#cssmenu > ul li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 150px;	
	}

		/* General link styling */
		#cssmenu > ul li a {
			/* Layout */
			display: block;
			position: relative;
			margin: 0;
			border-top: 1px dotted #3a3a3a;
			border-bottom: 1px dotted #1b1b1b;
			padding: 11px 20px;
			width: 110px;

			/* Typography */
			font-family: Helvetica, Arial, sans-serif;
			color: #d8d8d8;
			text-decoration: none;
			text-transform: uppercase;
			text-shadow: 0 1px 1px #000;
			font-size: 13px;
			font-weight: 300;
			

			/* Background & effects */
			background: #282828;
		}

		/* Rounded corners for the first link of the menu/submenus */
		#cssmenu > ul li:first-child>a {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			border-top: 0;
		}

		/* Rounded corners for the last link of the menu/submenus */
		#cssmenu > ul li:last-child>a {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			border-bottom: 0;
		}


		/* The hover state of the menu/submenu links */
		#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
			color: #fff;
			text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
			background: #f06343;
			background: -webkit-linear-gradient(bottom, #f06343, #f27d63);
			background: -ms-linear-gradient(bottom, #f06343, #f27d63); 
			background: -moz-linear-gradient(bottom, #f06343, #f27d63);
			background: -o-linear-gradient(bottom, #f06343, #f27d63);
			border-color: transparent;
		}

		/* The arrow indicating a submenu */
		#cssmenu > ul .has-sub>a::after {
			content: '';
			position: absolute;
			top: 16px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #d8d8d8; 
		}

		/* The same arrow, but with a darker color, to create the shadow effect */
		#cssmenu > ul .has-sub>a::before {
			content: '';
			position: absolute;
			top: 17px;
			right: 10px;
			width: 0px;
			height: 0px;

			/* Creating the arrow using borders */
			border: 4px solid transparent;
			border-left: 4px solid #000;
		}

		/* Changing the color of the arrow on hover */
		#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
			border-left: 4px solid #fff;
		}

		#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
			border-left: 4px solid rgba(0, 0, 0, .3);
		}

	
		/* THE SUBMENUS */
		#cssmenu > ul ul {
			position: absolute;
			left: 150px;
			top: -9999px;
			padding-left: 5px;
			opacity: 0;
			/* The fade effect, created using an opacity transition */
			-webkit-transition: opacity .3s ease-in;
			-moz-transition: opacity .3s ease-in;
			-o-transition: opacity .3s ease-in;
			-ms-transition: opacity .3s ease-in;
		}

		/* Showing the submenu when the user is hovering the parent link */
		#cssmenu > ul li:hover>ul {
			top: 0px;
			opacity: 1;
		}

HTML CODE:

<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Menu 1</span></a></li>
<li><a href='#'><span>Menu 2</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

So these The End. If you face any problem to add these menu on your site just tell me on the comment section.

Labels: Blogger Tips, Blogger Widget

Responses

16 Respones to "8 Simple Css Vertical menu bar for blogger"

Unknown said...: SUPERRR THANKS A LOT

5:18 AM
deepak_arora said...: thankyou very much your magermuch haa haa lol

1:12 AM
deepak_arora said...: A: Just look at that young person with the short hair and blue jeans. Is it a boy or a girl?
B: It's a girl. She's my daughter.
A: Oh, I'm sorry, sir. I didn't know that you were her father.
B: I'm not. I'm her mother.

1:15 AM
deepak_arora said...: Boy:Hey can i touch ur software?
Girl: first show me ur hardware?
.
.
Boy: can i install it in ur system?
Girl: Ok…… but cover it with antivirus, then install it.

1:16 AM
Anonymous said...: Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

http://freebietemplate.com/css-designs/css-designs.html

have a nice day

3:30 AM
Unknown said...: i dont understand the url part in the htnl, what do i put in?

8:07 AM
Blog Okulu said...: thank you good design.araba yarışları

4:37 AM
Blog Okulu said...: it is great menus.araba oyunları

4:39 AM
Muad'Dib said...: can any one explain me how to use submenus

4:08 PM
Unknown said...: its more helpful for all

1:18 AM
Blog Okulu said...: this is great post Iwill use my web sites, thank you.
araba oyunu
asker oyunları
temzilik oyunları

1:31 PM
Unknown said...: Valeu,cara.

8:34 AM
Ádagus Felipe said...: thank u so much dude, really :']

6:56 AM
Unknown said...: www.draughtsmanmechanical.com

1:45 AM
Unknown said...: www.draughtsmanmechanical.com

1:48 AM
Parhlad Suthar said...: www.internetkidunia.com

7:38 PM