第三级水平菜单栏的UL列表无法正常显示

时间:2017-07-26 11:47:24

标签: html css drop-down-menu menu

在我的博客factslidez.blogspot.in水平菜单栏中无法正常工作。请检查此代码笔并导航菜单栏直到第三级。将鼠标悬停在任何物品上时,它无法正常工作。

请参阅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

1 个答案:

答案 0 :(得分:2)

添加这些CSS规则并试一试

CSS

ul.sub-menu ul.sub-menu {
    left: 100%;
    display: none;
}

.sub-menu li:hover .sub-menu {
    display: block;
}