Amazing Tricks For Blogger: Menu

Showing posts with label Menu. Show all posts

Labels: CSS, Menu

Silver Salmon Button Drop down

Today I am going to teach you a another attractive menu bar. This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.

This is a live example of "Silver Salmon Button Drop down".

Home
Products
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact Us

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard.
Then click on "Layout" and then on "Add a Gadget".
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact Us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

0 comments

Labels: CSS, Menu

Ash Apple Menu With CSS3

This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also.

This is a live example of "Ash Apple Menu With CSS3"

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard
Then click on "Layout" and then on "Add a Gadget".
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

0;background:#7d7d7d url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

110px;line-height:100%;border-radius:1em;font:normal

0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-

radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0

1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba

(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0

8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu

a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-

decoration:none;display:block;padding:8px 20px;margin:0;border-

radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-

shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover

{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a

{background:#979797 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

40px;background:#666 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -

40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px

1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-

shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul

li:hover a,#cssmenu li:hover li a

{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-

box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url

(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -100px !

important;color:#fff !important;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}

#cssmenu li:hover > ul{display:block}#cssmenu ul ul

{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;

left:0;background:url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-

s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0

0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba

(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px

3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}

#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-

size:12px}#cssmenu ul:after

{content:'.';display:block;clear:both;visibility:hidden;line-

height:0;height:0}* html #cssmenu ul{height:1%}</style>

<div id="cssmenu">
<ul>
<li class="active"><a

href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a>

</li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a

href="http://amazingtricksforblogger.blogspot.com/p/site-

map.html"><span>Site map</span></a></li>
</ul>
</li>
<li class="last"><a

href="http://amazingtricksforblogger.blogspot.com/p/contact-

us.html"><span>Contact us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

1 comments

Labels: CSS, Menu

Black Apple Drop Down Menu

This is a live example of "Black Apple Drop Down Menu"

To add this navigation bar simply follow below steps.

Log in to your blogger dashboard
Then click on "Layout" and then on "Add a Gadget"
Now select a "HTML/JavaScript" and insert.
Now copy and past below codes and save and then arrange it in an proper place.
Now you are done and check your menu bar.

CSS Codes:

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Lables</span></a></li>
<li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Blogger"><span>Blogger</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/search/label/CSS"><span>CSS</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a>
<ul>
<li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Menu</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>map</span></a></li>
</ul>
</li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact us</span></a></li>
</ul>
</div>

Remember to insert your menu items like Home, Products and their links.

0 comments

Labels: CSS, Menu

Animated CSS3 Drop Down

This is a very attractive menu bar which is visitors prone to click on the menu.This is created by using CSS codes so pages will load quickly and help to navigate easily.

this is a live example of navigation menu which is trying to add.

Home
Product
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact us

sdsdsd

CSS Codes:

ul{list-style:none}#cssmenu a{text-decoration:none}#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba

(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a

{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-

transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li >

a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-

align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-

transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-

radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-

shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li >

ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-

width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a

{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px

16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-

color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul

{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-

align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-

border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0

1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul

{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style>

<div id="cssmenu">
<ul>
<li class="active"><a href="http://amazingtricksforblogger.blogspot.com"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Product</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a></li>
<li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact us</span></a></li>
</ul>
</div>

0 comments

Labels: CSS, Menu

Light Opera Drop Down Menu

Drop down Navigation menu is an essential part of any blog or website. Alway try to use pure CSS, HTML, CSS3 and images for menus and Don’t uses JQUERY or JavaScript.

Follow below steps to insert drop down menu to your blog too.

First of all log in to your blogger dashboard
Then select Layout tab
click on "Add a Gadget" link
Select and insert "HTML/JavaScript"

This is the live appearance of menu which is going to insert.

Home
Products
- Product 1
  - Sub Item
  - Sub Item
- Product 2
  - Sub Item
  - Sub Item
Site map
Contact

CSS Codes:

{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0

0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left

top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0

100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0

100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}

#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-

gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-

stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient

(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient

(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-

size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu

> ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after

{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-

right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-

radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after

{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-

right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-

shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba

(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient

(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec

0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec

0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a

{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left

top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef

100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef

100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-

shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-

sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-

sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted

#ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a

{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul

{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px

dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

Remember : Change links and menu names to your blog's links and to related menu names

Now save your script and place by dragging to suitable place.

Now you are done enjoy the menu.

0 comments

Labels: Blogger, Menu

Top 8 CSS Vertical menu bar for blogger

Sharing The first collection of Vertical Navigation menu bar for blogger. Today I give you some majestic designed vertical menu. Those menues make comfortable your blogger site. I am tried hard to share the best menu bar for you.to add Vertical Navigation CSS Menu on your blogger/blogspot site follow below steps.

Log in to your blogger account.
Then select edit HTML in the template tab.
To add any menu bar from below first copy the css code of your selected menu.
Then go to your blogger template and find ]]></b:skin>
Past your copied css code just above of ]]></b:skin>
Now save your template.

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

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

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.

Blue & White menu

CSS Codes:

/*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;
  }

Black & Yellow Menu

CSS Codes:

/* 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; 
  }

/* 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);
  }

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

Black & Blue Menu

CSS Codes:

/* 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;
  }

Red & White Menu

CSS Codes:

/* 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; 
 }

/* 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);
  }

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

Grey Hat Menu

CSS Codes:

#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/AVvXsEjAZz3FN9-XBUPVrk1MabjlgD-hDMx8rhdpLHgJtAu-XwCDDOfDtenwKIiLRQhfXxYkmpPDhnIpdAOjFbxbzfTBRbkJ-rKKUYPLNbc0fhgZ8CyS15RiEIWMTfzZLQBHkq66AUbL_rYoKRAf/s220/background.gif');
}
#cssmenu a:hover{
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif') no-repeat right;
 padding: 6px 40px;
}:148px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41Z36dixyla0vZBNWKvGYzsaKotZgrRuBoOxzGMZYjJBthMhZVGPyphY10Ju34wFIXwKcaHGuCess0CXjemVehYQfopvJtBAXKy96seu_Z8Z9L_RN0_yw0I9nzJFJBPsbnQVgPEcVsmEd/s220/highlight.gif) no-repeat;color:#b18211;}

Vertical-Massive-Blue

CSS Codes:

Bitbox Menu

CSS Codes:

#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/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/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/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/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/AVvXsEiUxqb9mQItt8Rs63ePWU_5_rWGPTOe5bp6KvOTMV_W571l7TNuMpUfc1TfpctS1ndnc7TxbNDN1CKAztDjVkPjiw9z7t_kDfWxwhoSTx9KoV2F5aaLlGRZqEo1DQHLJimPpVSl_LJqD444/s1600/v6.gif) 0 -64px;
 background-repeat:no-repeat;
 padding: 8px 0 0 50px;
 }

Salmon Menu

CSS Codes:

/* 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; 
 }

/* 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; 
  }

/* 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);
  }

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

0 comments

Second Menu

Silver Salmon Button Drop down

Ash Apple Menu With CSS3

Black Apple Drop Down Menu

Animated CSS3 Drop Down

Light Opera Drop Down Menu

Top 8 CSS Vertical menu bar for blogger

Sponsors

Labels

Popular Posts

Blog Archive

Contributors

Labels

Labels

Labels