How to add a Dropdown Menu in Blogger (Horizontal Type)

The menu is one of the most important elements for each website and blog. It helps your visitors to find the oldest posts, also it gives you a chance to represent the exact article you want.

Search engines also like when the site has navigation elements because it greatly simplifies the movement on it. So use this widget right now.

How to add a horizontal dropdown menu in Blogger

It's not so easy to find a dropdown menu which will work fine for each Blogger Themes (Templates), because every different theme has its own markup. But there is one good menu, which I fink, can handle by this task perfectly. The main advantages of this menu are that it has a dropdown buttons, it's responsive, and will look great on mobile devices. Also, it's partially sticky. DEMO

So, go to your Blogger dashboard, open Theme - Edit HTML, find there closing tag </body> and paste above it this HTML code:

HTML<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
  
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  
<a class='btn' href='#search_box' id='search'>&#9740;</a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
  <li><a href='#' title='Link'>Home</a></li>
  <li><a href='#' title='Link'>Category</a>
  <ul>
   <li><a href='#' title='Link '>Link</a></li>
   <li><a href='#' title='Link'>Link</a></li>
  </ul>
  </li>
  <li><a href='#' title='Link'>Portfolio</a>
   <ul>
    <li><a href='#' title='Link'>Link</a></li>
    <li><a href='#' title='Link'>Link</a></li>
    <li><a href='#' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#' title='Link'>Work</a>
  <ul>
   <li><a href='#' title='Link'>Link</a></li>
   <li><a href='#' title='Link'>Link</a></li>
   <li><a href='#' title='Link'>Link</a></li>
   <li><a href='#' title=' Link'> Link</a></li>
  </ul>
  </li>
  <li><a href='#' title='Link'>Playground</a>
   <ul>
    <li><a href='#' title='Link'>Link  </a></li>
    <li><a href='#' title='Link'>Link</a></li>
    <li><a href='#' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#' title='Link'>Sitemap</a></li>
 </ul>
 </nav>
<form action='/search/' class='search_box' id='search_box'>
  <input name='q' placeholder='Search' type='text' value=''/>
  <input class='search_icon' type='submit' value='Search'/>
</form>
</div>

<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
    position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})
</script>

Save Theme and check the result. If Mobile version of this menu will not work, add into your Theme just before the closing tag </head> this jquery code:

Jquery<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Save Theme and check the mobile version of the menu now.

 
Video instruction: 

Now, if you have any questions, write it in the comments below.

Simple CSS Dropdown Menu for Default Blogger Themes

You already know that the Blogger has a standard menu (Pages widget) where you can add not only static pages but also links to any other pages. And by default, there is no way to set dropdown links in it. This is exactly what we are going to fix. First, go to your control panel, Layout section, create a new HTML / Javascript gadget, place the HTML code in it:

HTML<div class="section" id="page_list_top" name="Page list (upper)"><div class="widget PageList" data-version="2" id="PageList1">
<div class="widget-content">
<div class="overflowable-container overflowable-3">
<div class="overflowable-contents">
<div class="container">
<ul class="tabs">
<li class="overflowable-item" aria-hidden="false">
<a href="#">Home</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">News</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">Download games</a>
</li>
<div class="dropdown">
<li class="dropbtn"><a href="#"> Dropdown <i aria-hidden="true" class="fa fa-caret-down"></i></a>
</li>
<div class="dropdown-content">
<a href="#">Sport</a>
<a href="#">Movie</a>
<a href="#">Business</a>
<a href="#">Tech</a>
<a href="#">Music</a>
<a href="#">News</a>
<a href="#">Health</a>
</div>
</div>
</ul>
</div>


</div>
</div></div></div></div>

Save the widget. 

Now go to the Theme - Edit HTML and add after the ]]></b:skin> the following CSS code:

CSS<style>
.tabs-inner {padding: 0;}
.overflowable-container, #page_list_top .widget.PageList .overflowable-contents, .blog-name, .top-nav .PageList, .centered-top-secondline .PageList ul{overflow:visible;}  
.tabs-outer{overflow:visible;}
.tabs .widget ul, .tabs .widget ul{overflow:visible;}  
.dropdown a:hover {text-decoration:none;}  
.dropbtn a{color:#!important}
.dropbtn { border: none; position: relative; color: #cccccc; background: #3330; padding: 0px; float: none!important;} .dropdown { position: relative; cursor: pointer; display:inline-block; margin-right:0px;} .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 9; margin-top: 0px;} .dropdown-content a { color: #fff!important; padding: 12px 16px; text-decoration: none; display: block; margin-left: 0px; background: #11111175; position: relative; float: left; width: 100%; text-align: left; } .dropdown-content a:hover {background: #!important; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:before {content:&quot;&quot;;position:absolute;width:0;left:0;right:0;margin:auto; bottom:5px;height:3px;background:#fff;opacity:0;visibility:hidden;transition: all 0.8s ease-in-out;} .dropdown-content a:hover:before {opacity:1;visibility:visible;width:90%;}
@media(max-width:700px) {.overflowable-container{display: inline-block;}}
</style> 

Save your changes. 

If you're using the Soho Theme then add another chunk to the CSS:

CSSli.dropbtn:before { color: rgba(0, 0, 0, 0.54); content: '\00b7'; }

Video instruction of how to use a simple menu