Add Drop Down CSS Menu For Your Blog

Hi Friends. How Are You ? Im Fine. Today Im Enter New Label. Label Name Is Blog CSS. Now I Will Teach How To Add Drop Down CSS Menu For Your Blog. This Very Easy Tip.This Post Is My 2nd Post In This Blog And 25 Post In This Blog.Today This Post Name Is "Add Drop Down CSS Menu For Your Blog" This Post Reading After Cooment This Post And Follow My Blog. Ok Now Start This Post.

Follow This Steps.

NO 1 : Log in Your Blog.
NO 2 : Visit Edit Html Tab And Enter Tic Expand Widget Templates.
NO 3 : Ok Now Press Ctrl+f In Your Keyboard
NO 4 : Search This Code.

</head> 

NO 5 : Copy Paste This Code.

<style type='text/css'><br /> <br /> #catmenucontainer{<br /> <br /> height:29px;<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeKZweCPApwWcuvLomCmiROTujfnnnPmmE7D6uUmAYlJYvjLTpOtmw_JmxAo4irHzrkw5zAbU81FILPsMtiLWHJb-pbDBj7Vg6dDXoQNnnMStFIPA-aB6BwwEOTR3oP5CW2mvGwmUl1Au/) repeat-x;<br /> <br /> display:block;<br /> <br /> padding:0px 0 0px 0px;<br /> <br /> font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;<br /> <br /> font-weight:normal;<br /> <br /> border-top:1px solid #686D6F;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu ,#catmenu ul {<br /> <br /> margin: 0px 5px;<br /> <br /> padding: 0px;<br /> <br /> list-style: none;<br /> <br /> height:29px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  a {<br /> <br /> color: #999;<br /> <br /> display: block;<br /> <br /> font-weight: normal;<br /> <br /> padding: 4px 10px 6px 10px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  a:hover {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQRkJfCH1gMvE_y8YyihagFYVPFS8HbtEidooe9pe7UIWDnope6guKIBSEoxH3lUcaMXqSmSJddADk5a7AZkoNJmGNopUsOLGC3AtwpDhZyIJnVmPmxD1n-pwQgGvaj3lnxpprd2_2Xkg/) repeat-x;<br /> <br /> color: #fff;<br /> <br /> display: block;<br /> <br /> text-decoration: none;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li {<br /> <br /> float: left;<br /> <br /> margin: 0px;<br /> <br /> padding: 0px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li li {<br /> <br /> float: left;<br /> <br /> margin: 0px 0px 0px 0px;<br /> <br /> padding: 0px;<br /> <br /> width: 130px;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeKZweCPApwWcuvLomCmiROTujfnnnPmmE7D6uUmAYlJYvjLTpOtmw_JmxAo4irHzrkw5zAbU81FILPsMtiLWHJb-pbDBj7Vg6dDXoQNnnMStFIPA-aB6BwwEOTR3oP5CW2mvGwmUl1Au/) repeat-x;<br /> <br /> width: 150px;<br /> <br /> float: none;<br /> <br /> margin: 0px;<br /> <br /> padding: 4px 10px 5px 10px;<br /> <br /> color:#E8EBEE;<br /> <br /> border-bottom:1px solid #2C3133;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li li a:hover, #catmenu  li li a:active {<br /> <br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQRkJfCH1gMvE_y8YyihagFYVPFS8HbtEidooe9pe7UIWDnope6guKIBSEoxH3lUcaMXqSmSJddADk5a7AZkoNJmGNopUsOLGC3AtwpDhZyIJnVmPmxD1n-pwQgGvaj3lnxpprd2_2Xkg/) repeat-x;<br /> <br /> width: 150px;<br /> <br /> float: none;<br /> <br /> margin: 0px;<br /> <br /> padding: 4px 10px 5px 10px;<br /> <br /> color:#fff;<br /> <br /> border-bottom:1px solid #2C3133;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li ul {<br /> <br /> position: absolute;<br /> <br /> width: 10em;<br /> <br /> left: -999em;<br /> <br /> z-index:1;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li:hover ul {<br /> <br /> left: auto;<br /> <br /> display: block;<br /> <br /> }<br /> <br /> <br /> <br /> #catmenu  li:hover ul, #catmenu li.sfhover ul {<br /> <br /> left: auto;<br /> <br /> }<br /> <br /> </style> 

NO 6 : Now Click Save Template.
NO 7 : Now Visit Layot Tab And ADD A gadget >> Html/JavaScript.
NO 7 : Copy Paste This Code.

<div id='catmenucontainer'>
<div id='catmenu'>

<ul>

<li><a href='Your URL' title='our title'>Home</a></li>
<li><a href='your URL' title='our title'>Web Design</a>
<ul class='children'>

<li><a href='Your URL' title='our title'>HTML</a></li>
<li><a href='Your URL' title='our title'>CSS</a></li>
<li><a href='Your URL' title='our title'>JavaScript</a></li>
</ul>

</li>



<li><a href='Your URL' title='our title'>Templates</a>

<ul class='children'>
<li><a href='Your URL' title='our title'>1 Column</a></li>

<li><a href='Your URL' title='our title'>2 Column</a></li>

<li><a href='Your URL' title='our title'>3 Column</a></li>

<li><a href='Your URL' title='our title'>4 Column</a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>Subscribe</a>
<ul class='children'>
<li><a href='Your URL' title='our title'>Email&lt;/a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>News&lt;/a></li>
<li><a href='Your URL' title='our title'>Google&lt;/a>

<ul class='children'>
<li><a href='Your URL' title='your title'>Yahoo&lt;/a></li>
<li><a href='Your URL' title='our title'>title&lt;/a></li>
</ul>

</li>

<li><a href='Your URL' title='our title'>About</a></li>
<li><a href='Your URL' title='our title'>Contact</a></li>
<li><a href='Your URL' title='our title'>PrivacyPolicy</a></li>
</ul>

</div>
</div>




Important...

Enter Name
Enter Link
Enter Drop Down To Name

Ok. Now Complete This Post. Please Comment This Post And Follow My Blog.

Bye.