Creating the Dropdown Menu Without HTML editing

Creating the Dropdown Menu Without HTML editing. Some time ago I never post an article about how to make like this, only difference in this post is the drop down menu. A little understanding of the drop down menu is, a Link menu that when in touch the mouse will have a link menu that falls down. For example my friend can see at the bottom of this post, please try to point your mouse cursor to the menu, then you will know the link that falls down. Okay buddy just see the tutorial below:

How to Make Drop Down Menu Without Edit HTML Template.

1. Please Login to your Bloger Account.
2. Select Layout / Layout.
3. Select Add Gadget / Add Gadget.
4. Copy and Paste Code Below on Column Add Gadget earlier.
Code.

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #FF0000;
background: -moz-linear-gradient(#FF0000, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style><br />
<br />
<ul id="menu"><li><a href="https://www.blogger.com/">Home</a></li>
<li><a href="#" rel="nofollow" target="_blank">Drop menu</a><br />
<ul><li><a href="#" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
<li><a href="#" rel="nofollow" target="_blank">Drop menu 2</a><br />
<ul><li><a href="#" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3</a><br />
<ul><li><a href="#" rel="dofollow" target="_blank">Menu 3.1</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3.2</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3.3</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3.4</a></li>
</ul></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
<li><a href="#" rel="nofollow" target="_blank">Drop menu 3</a><br />
<ul><li><a href="#" rel="dofollow" target="_blank">Menu 1</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 2</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 3</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 4</a></li>
<li><a href="#" rel="dofollow" target="_blank">Menu 5</a></li>
</ul></li>
</ul>

5. Done Click Save / Save.

Very easy instead of making the dropdown menu without having to edit HTML, so not so complicated to make it. Hope can be useful for you all who need it, Good luck.