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>
You have multiple ul
in li. Remove second ul
element. it will display. Check below screenshots.
Before:
After: (after removing ul
)
After: (if you want Photo Tutorials text you need to add this in li
)
<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>