Search code examples
htmlcsssubmenu

My submenu of menu bar not getting visible


I am working with menus on my website.

In my website, here is my structure- Articles -- Menu Tech Articles -- Sub Menu Blogger Tutorials -- Sub Sub Menu --(Problem Not Getting Visible) Photo Tutorials -- Sub Sub Menu

But my problem is "Blogger Tutorial" menu not getting visible. I tried to troubleshoot the issue but not getting any solution. You can see the problem on my website: http://www.joblesspanda.com/

Image for show problem: https://i.sstatic.net/YI44T.jpg

<ul class='menu'> <!-- Customize Navigation Menu Here -->
  <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
  <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
    <ul class='sub-menu'>
      <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
        <ul class='sub-menu'>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
            <ul class='sub-menu'>
              <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
              <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
              <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
              <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>-->
            </ul>
          </li>
        </ul>

        <ul class='sub-menu'>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
          </li>
        </ul>
      </li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
      <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
    </ul>
  </li>
  <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
  <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
  <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
  <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>


Solution

  • You have multiple ul in li. Remove second ul element. it will display. Check below screenshots.

    Before:

    enter image description here

    After: (after removing ul)

    enter image description here

    After: (if you want Photo Tutorials text you need to add this in li)

    enter image description here

    <ul class='menu'> <!-- Customize Navigation Menu Here -->
      <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
      <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
        <ul class='sub-menu'>
          <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
            <ul class='sub-menu'>
              <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
                <ul class='sub-menu'>
                  <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
                  <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
                  <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
                  <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
        <li><a href='#'>Sub Sub-Menu 4</a></li>-->
                </ul>
              </li>
              <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
              </li>
            </ul>
    
          </li>
          <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
          <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
          <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
        </ul>
      </li>
      <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
      <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
      <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
      <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
    </ul>