CSS3 navigation menu for blogger

How to add this menu to your blooger ??



very simple, click on add widget and choose <HTML/JAVA> widget form widgets list now paste all code in it and them save, you can also arrange your widget where you want to show your navigation menu





Menu-01: Result Below



Menu-01: Codes Below

<!--menu-01 css start -->

#mbeguggu04ebul_table {

margin: 0px;

padding: 0px;

line-height: 0px;

font-size: 0px;

display: inline-block;

}

#mbeguggu04ebul_table li a {

line-height: 16px;

font-size: 13px;

font-family: Arial,sans-serif;

text-decoration: none;

color: #FFFFFF;

font-style: normal;

font-weight: bold;

padding: 12px 15px 12px 15px;

display: block;

cursor: pointer;

white-space: nowrap;

}

.menu_div {

text-align: center;

}

#mbeguggu04ebul_table li div.buttonbg {

height: 40px;

width: 80px;

line-height: 0;

background-color: transparent;

border-style: solid;

border-color: transparent;

border-width: 0;

border-radius: 0;

padding: 0;

box-shadow: none;

text-align: center;

}

#mbeguggu04ebul_table li:hover div.buttonbg a, #mbeguggu04ebul_table li.expanded a.topitem, #mbeguggu04ebul_table li.active a.topitem,

#mbeguggu04ebul_table li.itemhot a.topitem, #mbeguggu04ebul_table li a:hover {

color: #FFFFFF;

font-style: normal;

font-weight: bold;

text-decoration: none;

}

#mbeguggu04ebul_table li.expanded div.buttonbg, #mbeguggu04ebul_table li.active div.buttonbg, #mbeguggu04ebul_table li.itemhot div.buttonbg, #mbeguggu04ebul_table li:hover div.buttonbg {

background-color: transparent;

box-shadow: none;

border-color: transparent;

}

#mbeguggu04ebul_table {

padding: 0;

border-style: solid;

border-color: #000000;

border-width: 1px;

border-radius: 5px;

background-color: transparent;

box-shadow: 0 0 5px -1px #333333, 0 1px 2px -1px #FFFFFF inset;

}

#mbeguggu04ebul_table li.first_button div.buttonbg {

border-radius: 4px 0 0 4px;

}

#mbeguggu04ebul_table li.last_button div.buttonbg {

border-radius: 0 4px 4px 0;

}

#mbeguggu04ebul_table ul li a {

color: #000000;

font-family: Arial,sans-serif;

font-size: 12px;

line-height: 15px;

font-style: normal;

font-weight: normal;

text-decoration: none;

display: block;

vertical-align: middle;

white-space: nowrap;

}

#mbeguggu04ebul_table ul li:hover > a {

color: #FFFFFF;

font-family: Arial,sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

text-decoration: none;

}

#mbeguggu04ebul_table ul li.subexpanded a.subexpanded, #mbeguggu04ebul_table ul li.subitemhot a.subitemhot, #mbeguggu04ebul_table ul li a:hover {

color: #FFFFFF;

font-family: Arial,sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

text-decoration: none;

}

#mbeguggu04ebul_table ul li:hover, #mbeguggu04ebul_table ul li.subexpanded, #mbeguggu04ebul_table ul li.subitemhot {

border-color: transparent;

background-color: transparent;

box-shadow: none;

}

#mbeguggu04ebul_table ul {

margin: 0;

border-style: solid;

border-color: #98B7E4;

border-width: 0;

padding: 0;

background: transparent;

font-size: 0;

border-radius: 5px;

}

#mbeguggu04ebul_table ul li a {

padding: 7px 15px 7px 13px;

text-align: left;

}

#mbeguggu04ebul_table ul li.separator {

padding: 7px;

cursor: default;

background: none;

box-shadow: none;

border-width: 0;

}

#mbeguggu04ebul_table ul li.separator div {

border-top: 1px solid #858585;

font-size: 0px;

}

#mbeguggu04ebul_table ul li {

border-style: solid;

border-color: transparent;

border-width: 0;

height: auto;

width: auto;

text-align: left;

line-height: 0;

font-size: 0;

cursor: pointer;

float: none;

margin: 0 0 0px 0;

border-radius: 0;

padding: 0;

box-shadow: none;

background-color: transparent;

}

#mbeguggu04ebul_table ul li.first_item {

border-radius: 5px 5px 0 0;

}

#mbeguggu04ebul_table ul li.last_item {

border-radius: 0 0 5px 5px;

}

#mbeguggu04ebul_table ul {

box-shadow: 0 0 7px -1px #666666;

}

#mbeguggu04ebul_table .spaced_li {

margin: 0px 0px 0px 0px;

}

#mbeguggu04ebul_table a img {

border: none;

}

#mbeguggu04ebul_table li {

list-style: none;

float: left;

}

#mbeguggu04ebul_table.css_menu li {

position: relative;

}

#mbeguggu04ebul_table.css_menu ul li:hover > ul {

opacity: 1;

}

#mbeguggu04ebul_table.css_menu li:hover > ul {

top: 100%;

left: 0;

right: auto;

opacity: 1;

transform: scale(1,1);

-webkit-transform: scale(1,1);

-moz-transform: scale(1,1);

-ms-transform: scale(1,1);

}

#mbeguggu04ebul_table.css_menu ul li:hover > ul {

top: -0px;

left: 100%;

right: auto;

}

#mbeguggu04ebul_table.css_menu ul {

transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

transition-property:transform,opacity;

-webkit-transition-property:-webkit-transform,opacity;

-moz-transition-property:-moz-transform,opacity;

-ms-transition-property:-ms-transform,opacity;

opacity: 0;

transform-origin: 0 0;

transform: scale(0.1, 0.1);

-webkit-transform-origin: 0 0;

-webkit-transform: scale(0.1, 0.1);

-moz-transform-origin: 0 0;

-moz-transform: scale(0.1, 0.1);

-ms-transform-origin: 0 0;

-ms-transform: scale(0.1, 0.1);

}

#mbeguggu04ebul_table ul {

position: absolute;

top:-99999px;

z-index: 4000;

}

#mbeguggu04ebul_table ul ul {

position: absolute;

z-index: 5000;

}

#mbeguggu04ebul_table .submenu_arrow {

margin-left: 8px;

}

#mbeguggu04ebul_table a.with_img_4 span.img_4x5, .mbeguggu04ebul_menulist span.img_4x5 {

width: 4px;

height: 5px;

display: inline-block;

vertical-align: middle;

}

#mbeguggu04ebul_table li:hover > a span.img_4x5, #mbeguggu04ebul_table li.subexpanded > a span.img_4x5 {

background-position: 0 -5px;

}

#mbeguggu04ebul_table div.gradient40 {

background-image: url(menu_post/button_bg.png);

background-repeat: repeat-x;

background-color: #000000;

}

#mbeguggu04ebul_table li:hover div.gradient40, #mbeguggu04ebul_table li.expanded div.gradient40, #mbeguggu04ebul_table li.active div.gradient40, #mbeguggu04ebul_table li.itemhot div.gradient40 {

background-image: url(menu_post/buttonhot_bg.png);

background-repeat: repeat-x;

background-color: #636363;

}

#mbeguggu04ebul_table div.gradient_button {

background: -moz-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);

background: -webkit-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);

background: -ms-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);

background: linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);

}

#mbeguggu04ebul_table li:hover div.gradient_button, #mbeguggu04ebul_table li.expanded div.gradient_button, #mbeguggu04ebul_table li.active div.gradient_button, #mbeguggu04ebul_table li.itemhot div.gradient_button {

background: -moz-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);

background: -webkit-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);

background: -ms-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);

background: linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);

}

#mbeguggu04ebul_table ul.gradient116 {

background-image: url(menu_post/menu_bg.png);

background-repeat: repeat-x;

background-color: #E8E8E8;

}

#mbeguggu04ebul_table ul.gradient_menu {

background: -moz-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);

background: -webkit-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);

background: -ms-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);

background: linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);

}

#mbeguggu04ebul_table ul li.gradient29:hover, #mbeguggu04ebul_table ul li.gradient29.subexpanded, #mbeguggu04ebul_table ul li.gradient29.subitemhot {

background-image: url('menuitemhot_bg.png');

background-repeat: repeat-x;

background-color: #424242;

}

#mbeguggu04ebul_table ul li.gradient_menuitem:hover, #mbeguggu04ebul_table ul li.gradient_menuitem.subexpanded, #mbeguggu04ebul_table ul li.gradient_menuitem.subitemhot {

background: -moz-linear-gradient(top, #858585 0%, #424242 100%);

background: -webkit-linear-gradient(top, #858585 0%, #424242 100%);

background: -ms-linear-gradient(top, #858585 0%, #424242 100%);

background: linear-gradient(top, #858585 0%, #424242 100%);

}

<!--menu-01 css end -->

<ul id="mbeguggu04ebul_table" class="mbeguggu04ebul_menulist css_menu" style="width: 595px; height: 40px;">

<li class="topitem spaced_li first_button"><div class="buttonbg gradient_button gradient40" style="width: 67px;"><a href="#">Home</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 108px;"><a href="#">Contact Us >></a></div>

<ul class="gradient_menu gradient116">

<li class="gradient_menuitem gradient29 first_item"><a href="#" title="">Facebook</a></li>

<li class="gradient_menuitem gradient29"><a href="#" title="">Google +</a></li>

<li class="gradient_menuitem gradient29"><a href="#" title="">Twitter</a></li>

<li class="gradient_menuitem gradient29 last_item"><a href="#" title="">Linked In</a></li>

</ul></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40"><a href="#">Support</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 84px;"><a href="#">Tutorials</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 93px;"><a href="#">You Can >></a></div>

<ul class="gradient_menu gradient116">

<li class="gradient_menuitem gradient29 first_item"><a title="">Item</a></li>

<li class="gradient_menuitem gradient29"><a title="">Item</a></li>

<li class="gradient_menuitem gradient29"><a title="">Item</a></li>

<li class="gradient_menuitem gradient29 last_item"><a title="">Item</a></li>

</ul></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 86px;"><a href="#">Add new</a></div></li>

<li class="topitem last_button"><div class="buttonbg gradient_button gradient40" style="width: 77px;"><a href="#">Buttons</a></div></li>

</ul>




Menu-02: Result Below










Menu-02: Codes Below









<!--menu02 css start -->

#mbeguggu03ebul_table {

margin: 0px;

padding: 0px;

line-height: 0px;

font-size: 0px;

display: inline-block;

}

#mbeguggu03ebul_table li a {

line-height: 16px;

font-size: 13px;

font-family: Arial,sans-serif;

text-decoration: none;

color: #FFFFFF;

font-style: normal;

font-weight: normal;

padding: 12px 15px 12px 15px;

display: block;

cursor: pointer;

white-space: nowrap;

}

#mbeguggu03ebul_table li div.buttonbg {

height: 40px;

width: 80px;

line-height: 0;

background-color: transparent;

border-style: solid;

border-color: transparent;

border-width: 0;

border-radius: 0;

padding: 0;

box-shadow: none;

text-align: center;

}

#mbeguggu03ebul_table li:hover div.buttonbg a, #mbeguggu03ebul_table li.expanded a.topitem, #mbeguggu03ebul_table li.active a.topitem,

#mbeguggu03ebul_table li.itemhot a.topitem, #mbeguggu03ebul_table li a:hover {

color: #FFFFFF;

font-style: normal;

font-weight: normal;

text-decoration: none;

}

#mbeguggu03ebul_table li.expanded div.buttonbg, #mbeguggu03ebul_table li.active div.buttonbg, #mbeguggu03ebul_table li.itemhot div.buttonbg, #mbeguggu03ebul_table li:hover div.buttonbg {

background-color: #254F8D;

box-shadow: none;

border-color: #CC0000 transparent transparent transparent;

}

#mbeguggu03ebul_table {

padding: 0;

border-style: solid;

border-color: #1A52A1;

border-width: 1px;

border-radius: 5px;

background-color: #1E54A3;

box-shadow: 0 0 5px -1px #333333, 0 1px 2px -1px #FFFFFF inset;

}

#mbeguggu03ebul_table li.first_button div.buttonbg {

border-radius: 4px 0 0 4px;

}

#mbeguggu03ebul_table li.last_button div.buttonbg {

border-radius: 0 4px 4px 0;

}

#mbeguggu03ebul_table ul li a {

color: #333333;

font-family: Arial,sans-serif;

font-size: 12px;

line-height: 15px;

font-style: normal;

font-weight: normal;

text-decoration: none;

display: block;

vertical-align: middle;

white-space: nowrap;

}

#mbeguggu03ebul_table ul li:hover > a {

color: #333333;

font-family: Arial,sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

text-decoration: underline;

}

#mbeguggu03ebul_table ul li.subexpanded a.subexpanded, #mbeguggu03ebul_table ul li.subitemhot a.subitemhot, #mbeguggu03ebul_table ul li a:hover {

color: #333333;

font-family: Arial,sans-serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

text-decoration: underline;

}

#mbeguggu03ebul_table ul li:hover, #mbeguggu03ebul_table ul li.subexpanded, #mbeguggu03ebul_table ul li.subitemhot {

border-color: transparent;

background-color: transparent;

box-shadow: none;

}

#mbeguggu03ebul_table ul {

margin: 0;

border-style: solid;

border-color: #CCCCCC #CCCCCC #2058A8 #CCCCCC;

border-width: 1px 1px 3px 1px;

padding: 1px;

background: #FFFFFF;

font-size: 0;

border-radius: 5px;

}

#mbeguggu03ebul_table ul li a {

padding: 7px 15px 7px 13px;

text-align: left;

}

#mbeguggu03ebul_table ul li.separator {

padding: 7px;

cursor: default;

background: none;

box-shadow: none;

border-width: 0;

}

#mbeguggu03ebul_table ul li.separator div {

border-top: 1px solid #C0C0C0;

font-size: 0px;

}

#mbeguggu03ebul_table ul li {

border-style: solid;

border-color: transparent;

border-width: 0;

height: auto;

width: auto;

text-align: left;

line-height: 0;

font-size: 0;

cursor: pointer;

float: none;

margin: 0 0 0px 0;

border-radius: 4px;

padding: 0;

box-shadow: none;

background-color: transparent;

}

#mbeguggu03ebul_table ul {

box-shadow: 0 0 5px -1px #666666;

}

#mbeguggu03ebul_table .spaced_li {

margin: 0px 1px 0px 0px;

}

#mbeguggu03ebul_table a img {

border: none;

}

#mbeguggu03ebul_table li {

list-style: none;

float: left;

}

#mbeguggu03ebul_table.css_menu li {

position: relative;

}

#mbeguggu03ebul_table.css_menu ul li:hover > ul {

opacity: 1;

}

#mbeguggu03ebul_table.css_menu li:hover > ul {

top: 100%;

left: 0;

right: auto;

opacity: 1;

transform: scale(1,1);

-webkit-transform: scale(1,1);

-moz-transform: scale(1,1);

-ms-transform: scale(1,1);

}

#mbeguggu03ebul_table.css_menu ul li:hover > ul {

top: -1px;

left: 100%;

right: auto;

}

#mbeguggu03ebul_table.css_menu ul {

transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

-ms-transition-duration: 0.3s;

transition-property:transform,opacity;

-webkit-transition-property:-webkit-transform,opacity;

-moz-transition-property:-moz-transform,opacity;

-ms-transition-property:-ms-transform,opacity;

opacity: 0;

transform-origin: 0 0;

transform: scale(0.1, 0.1);

-webkit-transform-origin: 0 0;

-webkit-transform: scale(0.1, 0.1);

-moz-transform-origin: 0 0;

-moz-transform: scale(0.1, 0.1);

-ms-transform-origin: 0 0;

-ms-transform: scale(0.1, 0.1);

}

#mbeguggu03ebul_table ul {

position: absolute;

top:-99999px;

z-index: 4000;

}

#mbeguggu03ebul_table ul ul {

position: absolute;

z-index: 5000;

}

#mbeguggu03ebul_table .submenu_arrow {

margin-left: 8px;

}

#mbeguggu03ebul_table div.gradient40 {

background-image: url('button_bg.png');

background-repeat: repeat-x;

background-color: #184B95;

}

#mbeguggu03ebul_table li:hover div.gradient40, #mbeguggu03ebul_table li.expanded div.gradient40, #mbeguggu03ebul_table li.active div.gradient40, #mbeguggu03ebul_table li.itemhot div.gradient40 {

background-image: none;

background-color: #254F8D;

}

#mbeguggu03ebul_table div.gradient_button {

background: -moz-linear-gradient(top, #2D7CEA 0%, #184B95 100%);

background: -webkit-linear-gradient(top, #2D7CEA 0%, #184B95 100%);

background: -ms-linear-gradient(top, #2D7CEA 0%, #184B95 100%);

background: linear-gradient(top, #2D7CEA 0%, #184B95 100%);

}

<!--menu02 css end -->

<ul id="mbeguggu03ebul_table" class="mbeguggu03ebul_menulist css_menu" style="width: 601px; height: 40px;">

<li class="topitem spaced_li first_button"><div class="buttonbg gradient_button gradient40" style="width: 67px;"><a href="#">Home</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 108px;"><a href="#">Contact Us >></a></div>

<ul>

<li><a href="#" title="">Facebook</a></li>

<li><a href="#" title="">Google +</a></li>

<li><a href="#" title="">Twitter</a></li>

<li><a href="#" title="">Linked In</a></li>

</ul></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40"><a href="#">Support</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 84px;"><a href="#">Tutorials</a></div></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 93px;"><a href="#">You Can >></a></div>

<ul>

<li><a title="">Item</a></li>

<li><a title="">Item</a></li>

<li><a title="">Item</a></li>

<li><a title="">Item</a></li>

</ul></li>

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient40" style="width: 86px;"><a href="#">Add new</a></div></li>

<li class="topitem last_button"><div class="buttonbg gradient_button gradient40" style="width: 77px;"><a href="#">Buttons</a></div></li>

</ul>