The accompanying drop down menu is made just with CSS, is a level menu with sub-tabs and the right side has an adjusted inquiry. A menu is helpful for the individuals who don't require complex menus or lean toward not to utilize one that requires scripts or potentially excessively numerous pictures, additionally the establishment and customization is entirely basic, and to finish it off is very practical.
To see this drop down menu in real life, visit this demo blog
blogger menu, drop down menu, css menu
Preceding doing anything, on the off chance that you are utilizing a Template made through Blogger Template Designer, then you ought to consider doing these adjustments in the layout, generally the menu won't not be shown effectively:
From your Blogger's Dashboard, go to Template (make a reinforcement < see the screenshot) > Edit HTML:
furthermore, look (CTRL + F) for the accompanying line:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
Screenshot
Evacuate the code in red.
You may have numerous parts as the one in red, erase all you find.
....then discover this area in your format:
/* Tabs
- - - */
...also, expel all that is inside it, until you reach to the Headings part.
/* Tabs
- - - */
.tabs-external {
flood: covered up;
position: relative;
foundation: $(tabs.background.color) $(tabs.background.gradient) rehash scroll 0;
}
#layout .tabs-external {
flood: noticeable;
}
.tabs top, .tabs-top base {
position: supreme;
width: 100%;
fringe best: 1px strong $(tabs.border.color);
}
.tabs-top base {
base: 0;
}
.tabs-inward .gadget li a {
show: inline-square;
edge: 0;
cushioning: .6em 1.5em;
textual style: $(tabs.font);
shading: $(tabs.text.color);
outskirt beat: 1px strong $(tabs.border.color);
outskirt base: 1px strong $(tabs.border.color);
outskirt $startSide: 1px strong $(tabs.border.color);
}
.tabs-internal .gadget li:last-youngster a {
outskirt $endSide: 1px strong $(tabs.border.color);
}
.tabs-internal .gadget li.selected a, .tabs-inward .gadget li a:hover {
foundation: $(tabs.selected.background.color) $(tabs.background.gradient) rehash x scroll 0 - 100px;
shading: $(tabs.selected.text.color);
}
/* Headings
- - - */
At that point add this to where the code has been expelled (rather than the code in green):
#crosscol ul {z-record: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-external {z-index:1;}
.tabs .gadget ul, .tabs .gadget ul {overflow: visible;}
Having done this, we can at last include our menu.
The most effective method to Add Horizontal Drop Down Menu to Blogger
To put this even menu with submenus in your blog, then take after the following strides:
Step 1. From Template, go to Edit HTML and simply above ]]></b:skin> glue these styles:
/* Horizontal drop down menu
- - - */
#menuWrapper {
width:100%;/* Menu width */
height:35px;
cushioning left:14px;
background:#333;/* Background shading */
outskirt range: 10px;
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
textual style family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
content decoration:none;
textual style family:"Verdana", sans-serif;
textual style size:12px;/* Font estimate */
textual style weight:bold;
padding:0 0 12px;
cursor:pointer;
}
.menu li a.top_link traverse {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul,
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul
{position:absolute; left:- 9999px; beat:- 9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#333;/* Submenu foundation shading */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
text style weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
content indent:5px;
color:#ccc;
content decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(http://2.bp.blogspot.com/ - 38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151;/* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(http://2.bp.blogspot.com/ - 38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-rehash; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
beat:- 4px;
foundation: #333;/* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px;/* Width of the Search Box */
stature: 50px;
glide: right;
z-file: 2;
content adjust: focus;
edge beat: 5px;
edge right: 6px;
/* Background of the Search Box */
foundation: url(http://2.bp.blogspot.com/ - kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png) no-rehash;
}
#search-box {
edge best: 3px;
border:0px;
foundation: straightforward;
content align:center;
}
Screenshot
Step 2. Spare the Template
Step 3. Go to Layout > tap on Add a Gadget connect
Step 4. Pick HTML/Javascript and glue the accompanying inside the unfilled box:
<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>
<!- - Search Bar - >
<li>
<form action='/look' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>
</li>
</ul>
</div>
Customization:
- supplant the content in blue and red with your connections and titles.
- on the off chance that you require more tabs, then include a line like this simply above <!- - Search Bar - >
<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>
- on the off chance that you need to include a tab with sub-tabs, then include this code:
<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>
<ul class="sub">
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
</ul>
</li>
- and on the off chance that you need one of the other sub-tabs have sub-tabs then expel a line like the one in orange and change it to a code this way:
<li><a href="Link URL" class="fly">Submenu Title</a>
<ul>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Oth
