Stylish Round Corner Dropdown Menu for Blog/Website with CSS3 effect

Many of you aware about CSS3 effect menu styles, in this tutorial we presents you a wonderful Stylish Dropdown menu with CSS3 effect and Round corner. In the earlier posts we already shared various types of menu styles animated and simple installing code into template directly. But this menu style is totally different users can directly insert menu style code into HTML/Javascript Gadget instead of adding code to template. Webmaster don’t need work hard for adding this Round cornered Stylish Dropdown menu to blog/website. Users can simply customize page links (URL) and add choice attractive colors to menu to look attractive according to design of blog/website style. Let’s begin tutorial to educate you to add menu to your blog/website.

Watch More Menu Styles

Sign into your blogger account
From Blogger Dashboard Select ‘Layout’ link tab
Click on ‘Add a Gadget’ and select ‘HTML/Javascript’ link tab widget
Copy the below code and paste in it

<style>
/* The Round Corner Drop down Menu Code starts here blogtariff.com */
 #BlogtariffSimpleMenu {
 width:800px;
 background:#0874fe;
 border-bottom: 5px solid #1A1A1A;
 border-top: 1px solid #1A1A1A;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #BlogtariffSimpleMenu ul {
 float: left;
 width: 100%;
 }
 #BlogtariffSimpleMenu li {
 float: left;
 list-style-type: none;
 }
 #BlogtariffSimpleMenu li a {
 background:#0874fe;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #BlogtariffSimpleMenu li a:hover {
 background:#0874fe;
 color: #fff;
 }
 #BlogtariffSimpleMenu li li a {
 background: none;
 background-color: #c32751;
 border: 1px solid #1A1A1A;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #BlogtariffSimpleMenu li li a:hover {
 background: none;
 background-color: #111111;
 }
 #BlogtariffSimpleMenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #BlogtariffSimpleMenu li:hover ul {
 left: auto;
 }
</style>
<a style=" font-size:2px; color:#eeeeee; text-decoration:none;" href="http://www.blogtariff.com">BlogTariff.com</a>
<div id="BlogtariffSimpleMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>

Code Customization:

• Replace ‘#’ with your page links
• Replace ‘Menu1, 2, 3, 4 and 5 words with your page URLs names
• If need change background color replace #0874fe with your choice color by using our COLOR CHART
• And for submenu replace #c32751 with your choice color by using our COLOR CHART

 Or else leave it default and add it directly to your template.
That’s it done.