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://imgur.com/a/KaVU5QU
<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>
the problem is with extra ul just put your photo blog's li and blogger tutorial's li in single ul:
<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>
Related
I tried to validate my code on W3 validator and its showing errors like - No li element in scope but a li end tag seen.
It's bootstrap dropdown menu, that i found on bootstrap examples.
Am i missing something about list elements?
<li class="menu-open">
Collections
<ul class="drop-menu dropdown-menu">
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="drop-menu dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
<li class="drop-menu dropdown-submenu">
2014
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</li>
</ul>
</li>
</ul>
</li>
You are probably looking to have another ul inside your submenu items
<ul class="drop-menu dropdown-menu">
<li class="dropdown-submenu">
<ul>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
</ul>
In the following code:
<li class="drop-menu dropdown-submenu">
<li>2014</li>
<li>2013</li>
You definitely cannot have <li> as a direct descendant of itself. That's one major issue and apart from that, try having all the closing tags right. Bootstrap examples are validated perfectly.
i am creating a site which has a 4th level navigation but it seems like not appearing in mobile and tablet. Here is my code
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>
Products
<ul>
<li><a href="#" >Food Products</a>
<ul>
<li>
<a >Baking & Cooking Aids</a>
<ul>
<li><a href="breadingmix" >Breading Mix</a></li>
</ul>
</li>
<li><a>Beverages</a>
<ul>
<li>Concentrated-Cocoa</li>
<li><a href="concentratedpowder" >Concentrated Powder</a></li>
<li><a href="energy-drink" >Energy Drink</a></li>
<li><a href="carbonated-drink" >RTD - Carbonated Drink</a></li>
<li><a href="juices" >RTD - Juices</a></li>
<li><a href="milk-based" >RTD - Milk Based</a></li>
<li>RTD - Tea</li>
<li><a href="sports-drink" >Sports Drink</a></li>
<li><a href="water" >Water</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
Whenever I click on the Beverages menu the navigation is back to Food Products.
Can you help me with this one? Thank you!
I have created a slideshow but for some reason when I am clicking on the image to go to a next slide (as it should do) it takes it to another URL on a website I am creating.
I cant seem to find how I have managed to create a link to the page when clicking on it?
Here is the link to the page.
http://lichfieldrooms.uk/gallery.html
you <a> for all in navigation is broken you have not closed them so i think thats was causing the issue
<ul>
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
<li>
Rooms
<ul>
<li><a href="single.html">Single Bedroom</li>
<li><a href="double.html">Double Bedroom</li>
</ul>
</li>
<li><a href="gallery.html">Gallery</li>
<li><a href="calendar.html">Check Availability</li>
<li><a href="reservations.html">Terms</li
><li><a href="contact.html">Contact</li>
</ul>
it should be
<ul>
<li>Home
</li>
<li>About
</li>
<li>Rooms
<ul>
<li>Single Bedroom
</li>
<li>Double Bedroom
</li>
</ul>
</li>
<li>Gallery
</li>
<li>Check Availability
</li>
<li>Terms
</li>
<li>Contact
</li>
</ul>
I wrote a little generic menu and need help figuring out why second level links always display to the right of first level links. Code is kind of lenghty so here is a jsfiddle.
Here is the essentially what is happening.
<nav>
<ul>
<li><a href='#'>Link 1</a></li>
<li>
<a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li>
<a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
<li><a href='#'>Link 6</a></li>
<li><a href='#'>Link 7</a></li>
<li><a href='#'>Link 8</a></li>
<li>
<a href='#'>Link 8</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
</ul>
</li>
</ul>
</nav>
Link 2 and Link 2 Sub Links hover to the right. I want Link 8 Sub Link to hover left. Right now it goes out of bounds of the wrapper div. Ideally, IF there is enough space (256px) to the right, hover right. If there is not, hover left. Top links at the far right should have sub links hover left.
Try this http://jsfiddle.net/zx8oyx2n/6/
HTML
<ul class="left" >
<li><a href='#'>Sub Link 1</a>
</li>
</ul>
CSS
.left{
right:0;
}
I used
nav ul li:last-child ul { right: 0; }
because I'm not really concerned about IE8 or less.
I am trying to create a horizontal drop down menu with 3 levels of sub menus. I have almost created all menu items. I am trying to make it cross browser compatible. While I was testing in IE7 menu is not diaplaying properly. float is not working. Please suggest me what to do?
here is my code:
<ul id="menu_new">
<li>Home</li>
<li>Applications
<ul>
<li>Agency
<ul>
<li><a href="/apps/banner/web_links/NVE_South_Agency_PRDv2.ica" >NVE South</a></li>
<li>NVE North</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
<li> Visual Analytics</li>
<li>Settings
<ul>
<li>Manage Subject
<ul>
<li><a href="#" >Add Subject</a></li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
Fiddle Link
Result in IE8:
Result in IE7:
#menu_new > li{
display:inline-block;
position:relative;
line-height:35px;
height:35px;
*display:inline;/*Add this code of line*/
zoom:1; /*and Add this code of line*/
}