在我的博客 factslidez.blogspot.in 中，水平菜单栏无法正常工作。请检查此代码笔并将菜单栏导航至第三级。将鼠标悬停在任何元素的 UL 时，它无法正常工作。
请查看菜单栏 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>
CodePen 处的代码片段
最佳答案
添加这些 CSS 规则并试一试
CSS
ul.sub-menu ul.sub-menu {
left: 100%;
display: none;
}
.sub-menu li:hover .sub-menu {
display: block;
}
关于html - 三级水平菜单栏的 UL 列表显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45326051/