santosh
Reputation: 57
UL list for third level horizontal menubar not display properly
In my blog factslidez.blogspot.in horizontal menu bar not working correctly. please check this code pen and navigate menu bar till the third level. it is not working correctly when hovering to UL of any items.
please see the menu bar at https://factslidez.blogspot.in.
CSS
.menu-primarynbt {
position: static;
max-width: none;
min-height: 1px;
width: auto;
padding: 0;
text-align: left;
background: 0 0;
}
.menu-primarynbt p {
display: none;
}
.menu-primary-items, .menu-unset {
margin: 0;
line-height: 0;
}
.menu-primary-items li, .menu-unset li {
float: left;
background: #fff;
position: relative;
-webkit-transition: background .2s ease;
transition: background .2s ease;
}
.menu-primary-items li ul, .menu-unset li ul {
position: absolute;
top: -999em;
opacity: 0;
margin: 0;
z-index: 3;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}
.menu-primary-items li ul:focus ul, .menu-primary-items li ul:hover ul, .menu-unset li ul:focus ul, .menu-unset li ul:hover ul {
top:0;
left: 100%
}
.menu-primary-items li:active>a, .menu-primary-items li:focus>a, .menu-primary-items li:hover>a, .menu-unset li:active>a, .menu-unset li:focus>a, .menu-unset li:hover>a {
color: #fff;
}
.menu-primary-items li:active>ul, .menu-primary-items li:focus>ul, .menu-primary-items li:hover>ul, .menu-unset li:active>ul, .menu-unset li:focus>ul, .menu-unset li:hover>ul {
top: 4.2495em;
opacity: 1;
}
.menu-primary-items li:active>ul li, .menu-primary-items li:focus>ul li, .menu-primary-items li:hover>ul li, .menu-unset li:active>ul li, .menu-unset li:focus>ul li, .menu-unset li:hover>ul li {
min-width: 100%}
.menu-primary-items li:active>ul li a, .menu-primary-items li:focus>ul li a, .menu-primary-items li:hover>ul li a, .menu-unset li:active>ul li a, .menu-unset li:focus>ul li a, .menu-unset li:hover>ul li a {
margin-top: 0;
color: #373b41;
white-space: nowrap;
}
.menu-primary-items li:active>ul li:active>a, .menu-primary-items li:active>ul li:focus>a, .menu-primary-items li:active>ul li:hover>a, .menu-primary-items li:focus>ul li:active>a, .menu-primary-items li:focus>ul li:focus>a, .menu-primary-items li:focus>ul li:hover>a, .menu-primary-items li:hover>ul li:active>a, .menu-primary-items li:hover>ul li:focus>a, .menu-primary-items li:hover>ul li:hover>a, .menu-unset li:active>ul li:active>a, .menu-unset li:active>ul li:focus>a, .menu-unset li:active>ul li:hover>a, .menu-unset li:focus>ul li:active>a, .menu-unset li:focus>ul li:focus>a, .menu-unset li:focus>ul li:hover>a, .menu-unset li:hover>ul li:active>a, .menu-unset li:hover>ul li:focus>a, .menu-unset li:hover>ul li:hover>a {
color: #fff;
}
.menu-primary-items li a, .menu-unset li a {
color: #373b41;
margin: 0 .75em;
font-size: .813em;
line-height: 5.231em;
letter-spacing: .1em;
}
.menu-primary-items li a:focus, .menu-primary-items li a:hover, .menu-unset li a:focus, .menu-unset li a:hover {
color: #fff;
}
.menu-primary-items li:hover, .menu-unset li:hover {
background: #e6a117;
}
.menu-primary-items:after, .menu-unset:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
HTML
<div class='menu-containernbt menu-primarynbt' id='menu-primarynbt' role='navigation'>
<ul class='menu-primary-items' id='menu-primary-items' role='menubar'>
<li>
<a href='#'>World</a>
<ul class='sub-menu'>
<li>
<a href='#'>Asia</a>
<ul class='sub-menu'>
<li>
<a href='/2017/05/13-facts-about-indonesia.html'>Indonesia Facts</a>
</li>
<li>
<a href='/2017/05/21-facts-about-asia.html'>Asia Facts</a>
</li>
<li>
<a href='/2017/05/67-facts-about-india.html'>India Facts</a>
</li>
<li>
<a href='/2017/05/37-facts-about-russia.html'>Russia Facts</a>
</li>
<li>
<a href='/2017/05/80-facts-about-china.html'>China Facts</a>
</li>
<li>
<a href='/2017/05/77-facts-about-japan.html'>Japan Facts</a>
</li>
<li>
<a href='/2017/05/43-facts-about-north-korea.html'>North Korea Facts </a>
</li>
<li>
<a href='/2017/05/31-facts-about-israel.html'>Israel Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>America</a>
<ul class='sub-menu'>
<li>
<a href='/2017/05/11-facts-about-colombia.html'>Colombia Facts</a>
</li>
<li>
<a href='/2017/05/21-facts-about-venezuela.html'>Venezuela Facts</a>
</li>
<li>
<a href='/2017/06/20-facts-about-bolivia.html'>Bolivia Facts</a>
</li>
<li>
<a href='/2017/06/44-facts-about-argentina.html'>Argentina Facts</a>
</li>
<li>
<a href='/2017/06/43-facts-about-mexico.html'>Mexico Facts</a>
</li>
<li>
<a href='/2017/05/40-facts-about-cuba.html'>Cuba Facts</a>
</li>
<li>
<a href='/2017/06/61-facts-about-brazil.html'>Brazil Facts</a>
</li>
<li>
<a href='/2017/06/43-facts-about-canada.html'>Canada Facts</a>
</li>
<li>
<a href='/2017/06/174-facts-about-usa.html'>USA Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Africa</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/17-facts-about-south-africa.html '>South Africa Facts</a>
</li>
<li>
<a href='/2017/06/53-facts-about-africa.html '>Africa Facts</a>
</li>
<li>
<a href='/2017/06/47-facts-about-egypt.html '>Egypt Facts </a>
</li>
</ul>
</li>
<li>
<a href='#'>Europe</a>
<ul class='sub-menu'>
<li>
<a href='/2017/07/21-facts-about-iceland.html'>Iceland Facts</a>
</li>
<li>
<a href='/2017/06/15-facts-about-switzerland.html '>Switzerland Facts</a>
</li>
<li>
<a href='/2017/06/18-facts-about-denmark.html '>Denmark Facts</a>
</li>
<li>
<a href='/2017/06/22-facts-about-ireland.html '>Ireland Facts</a>
</li>
<li>
<a href='/2017/06/31-facts-about-finland.html '>Finland Facts</a>
</li>
<li>
<a href='/2017/06/56-facts-about-italy.html '>Italy Facts</a>
</li>
<li>
<a href='/2017/06/41-facts-about-norway.html '>Norway Facts</a>
</li>
<li>
<a href='/2017/06/51-facts-about-spain.html '>Spain Facts</a>
</li>
<li>
<a href='/2017/06/45-facts-about-sweden.html '>Sweden Facts</a>
</li>
<li>
<a href='/2017/06/59-facts-about-germany.html '>Germany Facts</a>
</li>
<li>
<a href='/2017/06/94-facts-about-united-kingdom.html '>UK Facts</a>
</li>
<li>
<a href='/2017/06/52-facts-about-france.html '>France Facts</a>
</li>
<li>
<a href='/2017/05/37-facts-about-russia.html'>Russia Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Ocenia</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/39-facts-about-new-zealand.html '>New Zealand Facts</a>
</li>
<li>
<a href='/2017/06/63-facts-about-australia.html '>Australia Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Antarctica</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/41-facts-about-antarctica.html '>Antarctica Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>U.S.A</a>
<ul class='sub-menu'>
<li>
<a href='/2017/07/16-facts-about-hawaii.html '>Hawaii Facts</a>
</li>
<li>
<a href='/2017/07/24-facts-about-alaska.html '>Alaska Facts</a>
</li>
<li>
<a href='/2017/07/20-facts-about-florida.html '>Florida Facts</a>
</li>
<li>
<a href='/2017/07/35-facts-about-texas.html '>Texas Facts</a>
</li>
<li>
<a href='/2017/07/45-facts-about-california.html '>California Facts</a>
</li>
<li>
<a href='/2017/07/73-facts-about-new-york.html '>New York Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>United Nations</a>
<ul class='sub-menu'>
<li>
<a href='/2017/07/20-facts-about-united-nations.html '>United Nations Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Cities</a>
<ul class='sub-menu'>
<li>
<a href='/2017/07/12-facts-about-las-vegas.html '>Las Vegas Facts</a>
</li>
<li>
<a href='/2017/07/39-facts-about-london.html '>London Facts</a>
</li>
<li>
<a href='/2017/07/73-facts-about-new-york.html'>New York Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Places</a>
<ul class='sub-menu'>
<li>
<a href='/2017/07/14-facts-about-big-ben.html '>Big Ben Facts</a>
</li>
<li>
<a href='/2017/07/17-facts-about-berlin-wall.html '>Berlin Wall Facts</a>
</li>
<li>
<a href='/2017/07/21-facts-about-amazon-rainforest.html '>Amazon Rainforest Facts</a>
</li>
<li>
<a href='/2017/07/16-facts-about-golden-gate-bridge.html '>Golden Gate Bridge Facts</a>
</li>
<li>
<a href='/2017/07/25-facts-about-auschwitz.html '>Auschwitz Facts</a>
</li>
<li>
<a href='/2017/07/20-facts-about-volcanoes.html '>Volcano Facts</a>
</li>
<li>
<a href='/2017/07/19-facts-about-desert.html '>Desert Facts</a>
</li>
<li>
<a href='/2017/07/30-facts-about-ocean.html '>Ocean Facts</a>
</li>
<li>
<a href='/2017/07/23-facts-about-mount-everest.html '>Mount Everest Facts</a>
</li>
<li>
<a href='/2017/07/24-facts-about-statue-of-liberty.html '>Statue of Liberty Facts</a>
</li>
<li>
<a href='/2017/07/22-facts-about-eiffel-tower.html '>Eiffel Tower Facts</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>History</a>
<ul class='sub-menu'>
<li>
<a href='#'>Historic Events</a>
<ul class='sub-menu'>
<li>
<a href='/2017/05/15-facts-about-vietnam-war.html'>Vietnam War Facts</a>
</li>
<li>
<a href='/2017/05/17-facts-about-d-day.html'>D-Day Facts</a>
</li>
<li>
<a href='/2017/05/30-facts-about-911.html'>9/11 Facts</a>
</li>
<li>
<a href='/2017/05/25-facts-about-civil-war.html'>Civil War Facts</a>
</li>
<li>
<a href='/2017/05/44-facts-about-history.html'>History Facts</a>
</li>
<li>
<a href='/2017/05/44-facts-about-world-war-i.html'>World War I Facts</a>
</li>
<li>
<a href='/2017/05/35-facts-about-holocaust.html'>Holocaust Facts</a>
</li>
<li>
<a href='/2017/05/41-facts-about-titanic.html'>Titanic Facts</a>
</li>
<li>
<a href='/2017/05/100-facts-about-world-war-ii.html'>World War II Facts </a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Society</a>
<ul class='sub-menu'>
<li>
<a href='#'>Religion</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/21-facts-about-buddhism.html'>Buddhism Facts</a>
</li>
<li>
<a href='/2017/06/12-facts-about-hinduism.html'>Hinduism Facts</a>
</li>
<li>
<a href='/2017/06/14-facts-about-christmas.html'>Christmas Facts</a>
</li>
<li>
<a href='/2017/06/34-facts-about-islam.html'>Islam Facts</a>
</li>
<li>
<a href='/2017/06/31-facts-about-judaism.html'>Judaism Facts</a>
</li>
<li>
<a href='/2017/06/56-facts-about-christianity.html'>Christianity Facts</a>
</li>
<li>
<a href='/2017/06/38-facts-about-bible.html'>Bible Facts</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Nature</a>
<ul class='sub-menu'>
<li>
<a href='#'>Plants and Minerals</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/59-facts-about-water.html'>Water facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Phenomena</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/19-facts-about-earthquakes.html'>Earthquake Facts</a>
</li>
<li>
<a href='/2017/06/16-facts-about-lightning.html'>Lightning Facts</a>
</li>
</ul>
</li>
<li>
<a href='#'>Global Issues</a>
<ul class='sub-menu'>
<li>
<a href='/2017/06/24-facts-about-global-warming.html'>Global Warming Facts</a>
</li>
<li>
<a href='/2017/06/26-facts-about-recycling.html'>Recycling Facts</a>
</li>
<li>
<a href='/2017/06/24-facts-about-atomic-bombs.html'>Atomic Bomb Facts</a>
</li>
<li>
<a href='/2017/06/34-facts-about-pollution.html'>Pollution Facts</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
code snippet at CodePen
Upvotes: 0
Views: 49
Answers (1)
Chandra Shekhar
Reputation: 3749
Add these CSS Rules and give a try
CSS
ul.sub-menu ul.sub-menu {
left: 100%;
display: none;
}
.sub-menu li:hover .sub-menu {
display: block;
}
Upvotes: 2
Related Questions
- CSS vertical multi level dropdown menu issue
- Third level of CSS menu doesn't display properly
- Dropdown menu: submenu are not displayed correctly
- Dropdown submenu is not displaying correctly
- Issue with multiple levels ul li menu
- Horizontal sub menu issue
- CSS dropdown menu - 3rd level issue
- CSS Dropdown 3rd level Menu Issue
- A little issue with Horizontal Menu Drop Down List CSS/HTML/Javascript
- Nested UL Dropdown Menu being cut off