Blogspot Drop Down Menu & Home Button is not working

HTML & CSS
1

My website: https://bestbloggingforyou.blogspot.com
I’m using external template on blogspot. Site’s navigation dropdown menu is not worrking, on ‘‘More’’ tab. At the left corner ‘home’ button has the similar issue.
Here is the style and html code. i’m not experienced in JS or css, so i havent been able to find any solution. Please provide me a solution to this.

#main-header-wrapper {
padding-bottom:10px;
background:$(header.background.color);
}
#header-wrapper {
min-height:100px;
margin-bottom:0px;
}
.head-col {
padding:20px 0;
}
.header-advertisement {
padding:30px 0;
}
.header-ad {
float:right
}
#header {
margin-top:-15px;
}
#header h1 {
color:#666666;
text-shadow:2px 2px 2px #FFFFFF;
letter-spacing:-2px;
}
#header a {
text-decoration:none;
color:#666666;
}
#header a:hover {
text-decoration:none;
color:#666666;
}
#header .description {
margin:-3px 5px 5px;
line-height:1.4em;
color:#888888;
font-size:14px;
}
.header {
margin:35px 0;
}
.h-title {
font-size:36px;
line-height:40px;
margin:10px 0;
font-family:inherit;
font-weight:bold;
line-height:1;
color:$(blog.title.color);
font-family: 'Raleway',sans-serif;
}
.h-title a {
color:$(blog.title.color);
}
.Header .description {
margin:.5em 0 10px;
padding:0 2px;
color:$(blog.description.color);
}
.date-header {
display:none;
}
.home-main-content {
padding: 0px !important;
}
#main {
padding-top:5px;
background:$(content.background.color);
}
.article-container{
background:$(content.background.color);
}
#content-top .widget{
margin-bottom:20px;
}
.post {
color:$(content.color);
line-height:2em;
margin-bottom:10px;
position:initial;
}

<!-- Start Main navbar -->
	<div class='container'>
		<nav class='teal lighten-1'>
		 <div class='nav-wrapper'>
			<a class='waves-effect waves-light brand-logo logo-main'><i class='medium mdi-action-home'/></a>
         	<ul class='right side-nav' id='slide-out'>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Me</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
                            <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              <li class='no-padding'>
                <ul class='collapsible collapsible-accordion'>
                  <li>
                    <a class='waves-effect waves-light collapsible-header'>More<i class='mdi-navigation-arrow-drop-down'/></a>
                    <div class='collapsible-body'>
                      <ul>
                        <li><a href='#!'>First</a></li>
                        <li><a href='#!'>Second</a></li>
                        <li><a href='#!'>Third</a></li>
                        <li><a href='#!'>Fourth</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </li>
        	</ul>
            <ul class='right hide-on-med-and-down'>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Me</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              <li><a class='waves-effect waves-light dropdown-button' data-activates='dropdown1' href='#!'>More<i class='mdi-navigation-arrow-drop-down right'/></a></li>
              <ul class='dropdown-content' id='dropdown1'>
                <li><a href='#!'>First</a></li>
                <li><a href='#!'>Second</a></li>
                <li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
                <li><a href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              </ul>
            </ul>
            <a class='button-collapse' data-activates='slide-out' href='#'><i class='mdi-navigation-menu'/></a>
		</div>
      </nav> 
	</div>
	<!-- End Main navbar -->
2

Hi mhdbuilm, welcome to the forums! :slightly_smiling_face:

Neither your html or css is coded for a dropdown. :wink:

From the top of my head, you cold test move the dropdown list to be wrapped by the list-item that is to show the drop list on hover:

          <li><a class='waves-effect waves-light dropdown-button' data-activates='dropdown1' href='#!'>More<i class='mdi-navigation-arrow-drop-down right'/></a>
              <ul class='dropdown-content' id='dropdown1'>
                  <li><a href='#!'>First</a></li>
                  <li><a href='#!'>Second</a></li>
                  <li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
                  <li><a href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              </ul>
          </li>

Then add some css to hide and show the dropdown list on hover(*):

.dropdown-button {
    position: relative; /* make the item be referred to as parent of the positioned child */
}
 .dropdown-content {
    position: absolute; /* remove the list from the natural flow */
    top: 100%; /* place its top at the item bottom without a gap at any item height */
    left: -9999px; /* hide the list well outside the viewport */
}
.dropdown-button:hover .dropdown-content {
    left: 0; /* align the sublist with its parent item on hover */
}

i’m not experienced in JS or css, so i havent been able to find any solution.

There are many tutorials to make a pure css dropdown menu. You could try a search: https://duckduckgo.com/?q=dropdown+menu+tutorial&ia=web

Please, for accessibility reasons, avoid JavaScript solutions for navigation. :slightly_smiling_face:

(*) Find out more about the techniques:

1 Like
3

Hi Erik
Thank you very much for solution and suggestion.
Much appreciated.

4

Where should i add this?

.dropdown-button {
    position: relative; /* make the item be referred to as parent of the positioned child */
}
 .dropdown-content {
    position: absolute; /* remove the list from the natural flow */
    top: 100%; /* place its top at the item bottom without a gap at any item height */
    left: -9999px; /* hide the list well outside the viewport */
}
.dropdown-button:hover .dropdown-content {
    left: 0; /* align the sublist with its parent item on hover */
}
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.