Submenu not working on mobile devices, Pls help for Blogspot

Hi. I have a simple dropdown menu and I’m having trouble making it work on mobile devices. It works fine on desktop, when I hover it slides down the menu and when I mouse out it hides, all pages work fine. However, in android when I tap on the menu item it’s not showing the submenu, and when I click it opens a blank page and I get the URL: “about: blank # blocked”

Screenshot

HTML:

<!-- Header Wrapper -->
  <div id='header-wrap'>
    <div class='mobile-menu-wrap'>
      <div class='mobile-menu'/>
    </div>
    <div class='container row'>
      <div class='header-logo'>    
        <b:section class='main-logo' id='main-logo' maxwidgets='1' name='Header Logo' showaddelement='yes'>
              <b:widget id='Header1' locked='true' title='Manifesto Underground (Cabeçalho)' type='Header' version='2' visible='true'>
                <b:widget-settings>
                  <b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-WfYYdVcxUO8/XdKE1DZR6MI/AAAAAAAAAUw/Vpy0vzXFdWwn0g2L7GB93kr5LL1PHGcxwCK4BGAYYCw/s1600/teste%2B3.png</b:widget-setting>
                  <b:widget-setting name='displayHeight'>182</b:widget-setting>
                  <b:widget-setting name='sectionWidth'>204</b:widget-setting>
                  <b:widget-setting name='useImage'>true</b:widget-setting>
                  <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
                  <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
                  <b:widget-setting name='displayWidth'>928</b:widget-setting>
                </b:widget-settings>
                <b:includable id='main' var='this'>
              <div class='header-widget'>
                <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
                <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
                <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
              </div>
            </b:includable>
                <b:includable id='behindImageStyle'>
              <b:if cond='data:sourceUrl'>
                <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
                <style type='text/css'>
                  .header-widget {
                    background-position: <data:blog.locale.languageAlignment/>;
                    background-repeat: no-repeat;
                  }
                </style>
              </b:if>
            </b:includable>
                <b:includable id='description'>
              <p>
                <data:this.description/>
              </p>
            </b:includable>
                <b:includable id='image'>
              <a class='header-brand' expr:href='data:blog.homepageUrl'>
                <img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image'/>
              </a>
            </b:includable>
                <b:includable id='title'>
              <h1>
                <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
                  <data:title/>
                </b:tag>
              </h1>
            </b:includable>
              </b:widget>
            </b:section>
      </div>
      <div class='header-menu'>
        <b:section class='main-menu' id='main-menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
          <b:widget id='LinkList74' locked='true' title='Link List' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='text-10'>_PÔSTERES</b:widget-setting>
              <b:widget-setting name='shownum'>15</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-1'>http://</b:widget-setting>
              <b:widget-setting name='link-2'>https://omanifestounder.blogspot.com/p/artistas-e-bandas.html</b:widget-setting>
              <b:widget-setting name='link-0'>/</b:widget-setting>
              <b:widget-setting name='link-11'>https://omanifestounder.blogspot.com/p/videos.html</b:widget-setting>
              <b:widget-setting name='link-10'>https://omanifestounder.blogspot.com/p/posters.html</b:widget-setting>
              <b:widget-setting name='text-9'>MAIS</b:widget-setting>
              <b:widget-setting name='link-9'>http://</b:widget-setting>
              <b:widget-setting name='text-8'>_CONTATO</b:widget-setting>
              <b:widget-setting name='link-7'>https://omanifestounder.blogspot.com/p/termos-de-uso_18.html</b:widget-setting>
              <b:widget-setting name='link-8'>https://omanifestounder.blogspot.com/p/contato.html</b:widget-setting>
              <b:widget-setting name='link-5'>http://</b:widget-setting>
              <b:widget-setting name='link-6'>https://omanifestounder.blogspot.com/p/sobre_18.html</b:widget-setting>
              <b:widget-setting name='link-3'>https://omanifestounder.blogspot.com/p/busca-por-genero_18.html</b:widget-setting>
              <b:widget-setting name='link-4'>https://omanifestounder.blogspot.com/p/epoca.html</b:widget-setting>
              <b:widget-setting name='text-1'>BUSCA</b:widget-setting>
              <b:widget-setting name='text-0'>PAGINA INICIAL</b:widget-setting>
              <b:widget-setting name='text-3'>_GÊNERO MUSICAL</b:widget-setting>
              <b:widget-setting name='text-2'>_ARTISTAS E BANDAS</b:widget-setting>
              <b:widget-setting name='text-5'>SOBRE</b:widget-setting>
              <b:widget-setting name='text-4'>_ÉPOCA</b:widget-setting>
              <b:widget-setting name='text-7'>_TERMOS DE USO</b:widget-setting>
              <b:widget-setting name='text-6'>_O BLOG</b:widget-setting>
              <b:widget-setting name='text-11'>_VÍDEOS</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <b:include name='content'/>
            </b:includable>
            <b:includable id='content'>
              <ul id='main-menu-nav' role='menubar'>
                <b:loop values='data:links' var='link'>
                  <li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
                </b:loop>
              </ul>
            </b:includable>
          </b:widget>
        </b:section>
      </div>

My blog

How can I fix this problem?

That should:
a) be a button
b) not link anywhere… mostly a however as you don’t want to link anywhere, just show the drop down menu.

Mobile devices have no sense of “hover” only click so no hover only event listener will work. Not only that, anyone using a keyboard will not be able to see/use it.

1 Like