Add best css Multi dropdown navigation menu with search box in blogger.

Hi friends now add best css Multidropdown navigation menu with search box in your blogger blog easily now.

Follow simple and easy step to adding this Navigation menu in your blogger blog easily ----->>>> * First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Find this code ]]</b:skin> by CTRL+F key easily now.

* Copy below code and paste before ]]</b:skin>

#NavbarMenu {
background:#000;
width: 960px;
height: 31px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #333;
font-weight: normal;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
margin: 0 auto 0;
padding: 0;
}
#NavbarMenuleft {
width: 650px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 310px;
font-size: 11px;
float: right;
margin: 0;
padding: 2px 0 0;
}

/*-----------Navigation Links-------------*/
.ddsmoothmenu{
font: bold 12px Arial, Tahoma, Verdana;
background: #000; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index: 1000;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #000; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: #414141;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: #ff6600; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
z-index: 500;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Arial, Tahoma, Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
/* ----------SEARCH---------------*/
#search {
height:18px;
width:auto;
width:310px;
float:right;
padding-top:3px;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:10px;
float: left;
width:210px;
height:18px;
padding: 0;
background:#fff;
border:1px solid #ddd;
font: normal 100% Arial, Helvetica, sans-serif;
color:#5778a1;
}
#searchsubmit {
margin-right:10px;
float: right;
margin-top: 0px;
border: none;
font: bold 100% Arial, Tahoma, Verdana;
color: #FFF;
background:#000;
border:1px solid #ddd;
height:18px;
line-height:20px
}

* Now again find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<script src='http://yourjavascript.com/23041001711/ddsmoothmenu.js' type='text/javascript'>

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

* Now go to your blogger Dashboard and click in design tab.

* Now you are here--->>> Page element.

* Click in Add gadget which is below blogger Header .

* And  When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id='NavbarMenu'>

<div id='NavbarMenuleft'>
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='YOUR BLOG URL HERE'>Home</a></li>
<li><a href='URL1 HERE'>TAB1 TITLE HERE</a>
<ul>
<li><a href='SUB URL1.1 HERE'>TAB1.1 TITLE HERE</a></li>
<li><a href='SUB URL1.2 HERE'>TAB1.2 TITLE HERE</a></li>
<li><a href='SUB URL1.3 HERE'>TAB1.3 TITLE HERE</a></li>
<li><a href='SUB URL1.4 HERE'>TAB1.4 TITLE HERE</a></li>
</ul>

</li>
<li><a href='URL2 HERE'>TAB2 TITLE HERE</a>
<ul>
<li><a href='SUB URL2.1 HERE'>SUB TAB2.1 TITLE HERE</a></li>
<li><a href='SUB URL2.2 HERE'>SUB TAB2.2 TITLE HERE</a></li>
<li><a href='SUB URL2.3 HERE'>SUB TAB2.3 TITLE HERE</a></li>
</ul>
</li>
<li><a href='URL3 HERE'>TAB3 TITLE HERE</a></li>
<li><a href='URL4 HERE'>TAB4 TITLE HERE</a>
<ul>

<li><a href='SUB URL4.1 HERE'>SUB TAB4.1 TITLE HERE</a></li>
<li><a href='URL5 HERE'>TAB5 TITLE HERE</a>
<ul>
<li><a href='SUB URL5.1 HERE'>SUB TAB5.1 TITLE HERE</a></li>
<li><a href='SUB URL5.2 HERE'>SUB TAB5.2 TITLE HERE</a></li>
<li><a href='URL6 HERE'>TAB6 TITLE HERE</a>
<ul>
<li><a href='SUB URL6.1 HERE'>SUB TAB6.1 TITLE HERE</a></li>
<li><a href='SUB URL6.2 HERE'>SUB TAB6.2 TITLE HERE</a></li>
<li><a href='SUB URL6.3 HERE'>SUB TAB6.3 TITLE HERE</a></li>

<li><a href='SUB URL6.4 HERE'>SUB TAB6.4 TITLE HERE</a></li>
<li><a href='SUB URL6.5 HERE'>SUB TAB6.5 TITLE HERE</a></li>
</ul>
</li>
<li><a href='SUB URL6.5.1 HERE'>SUB TAB6.5.1 TITLE HERE</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL7'>TAB7 TITLE HERE</a></li>
</ul>
<br style='clear: left'/>
</div>

</div>
<div id='NavbarMenuright'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>
</div>
</div>

 NOTE:- Change Highlighted Text in above code with your own title and URL ok

* Now click to save your HTML/javascript and you are done.