Question

我在嵌套水平悬停时遇到困难。我要么隐藏了嵌套的子菜单，要么在悬停时无法显示它。我添加了以下内容以隐藏第一个子菜单：

enter code here
.menu-holder ul li ul li ul li{
    display:none;
 }

以及以下内容尝试让它显示：

enter code here
 .menu-holder > ul > li > ul > li:hover > ul{
  display: inline;
  }

当隐藏工作时，显示不是。我不确定这是我最初应该如何隐藏子菜单。

我还没有解决的一件事是让菜单在向右填充屏幕之前填充屏幕。

 .wrapper {
     width:500px;
     height:500px;
	 color:black;
 }
 .menu-holder ul {
     margin: 2px 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0px 100px 0px;
     border-left: 1px dotted white;
 }
    
 .menu-holder ul li:hover{
     background-color: green;
 }
 .menu-holder ul li:hover ul {
     display: block;
 }
 .menu-holder ul li ul:hover {
     display: block;
 }
 .menu-holder ul li.current-menu-item
{
 background:#999
}
 .menu-holder ul li ul li ul li{
    display:none;
 }
 .menu-holder > ul > li > ul > li:hover > ul{
     display: inline;
 }

 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     display: block;
	 color:black;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li ul {
     float: none;
     display: none;
     position: absolute;
     top: 42px;
     left: 0px;
     margin: -1px 0 0px 10px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li ul li {
     position: static;
     float: none;
     display: inline;
     padding: 5px 10px 5px 10px;
     margin: 0px 0px 0px -10px;
     background-color: #025179;
 }
 .menu-holder ul li ul li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     font-weight: normal;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li ul li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li ul li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li:first-of-type {
     border-left: none;
 }

<div class="wrapper">
  <div class="menu-holder">
    <ul class="menu">
      <li><a href="#">item 1</a>
      </li>
      <li>
        <a id="close0" href="#" onclick="showiframe(this.id); return false;">
          Follow This</a>

        <ul class="submenu">
          <li><a id="about" href="" onclick="showiframe(this.id); return false;">About</a>
          </li>
          <li>Item1</li>
          <li>Item2</li>
          <li>Follow This
            <ul class="submenu">
              <li><a href="#">Item1</a>
              </li>
              <li>Item2</li>
              <li>Item3</li>
              <li>follow This
                <ul class="submenu">
                  <li><a href="#">Item1</a>
                  </li>
                  <li>Item2</li>
                  <li>Item3</li>
                  <li>Item4</li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Submenu item 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">menu item 3</a>
      </li>
      <li><a href="#">menu item 4</a>
      </li>
    </ul>
  </div>
  <!-- menu-holder end -->
</div>

Answer 1

不太确定这是否是您正在寻找的效果。

＆＃13;

 .wrapper {
     width:500px;
     height:500px;
	 color:black;
 }
 .menu-holder ul {
     margin: 2px 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0px 100px 0px;
     border-left: 1px dotted white;
 }
    
 .menu-holder ul li:hover{
     background-color: green;
 }

 .menu-holder ul li:hover > ul {
     display: block;
 }
  .menu-holder ul li.current-menu-item
{
 background:#999
}

 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     display: block;
	 color:black;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li ul {
     float: none;
     display: none;
     position: absolute;
     top: 100%;
     left: 0px;
     margin: -1px 0 0px 10px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li ul li {
     position: static;
     float: none;
     display: inline;
     padding: 5px 10px 5px 10px;
     margin: 0px 0px 0px -10px;
     background-color: #025179;
 }
 .menu-holder ul li ul li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     font-weight: normal;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li ul li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li ul li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li:first-of-type {
     border-left: none;
 }

＆＃13;

<div class="wrapper">
  <div class="menu-holder">
    <ul class="menu">
      <li><a href="#">item 1</a>
      </li>
      <li>
        <a id="close0" href="#" onclick="showiframe(this.id); return false;">
          Follow This</a>

        <ul class="submenu">
          <li><a id="about" href="" onclick="showiframe(this.id); return false;">About</a>
          </li>
          <li>Item1</li>
          <li>Item2</li>
          <li>Follow This
            <ul class="submenu">
              <li><a href="#">Item1</a>
              </li>
              <li>Item2</li>
              <li>Item3</li>
              <li>follow This
                <ul class="submenu">
                  <li><a href="#">Item1</a>
                  </li>
                  <li>Item2</li>
                  <li>Item3</li>
                  <li>Item4</li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Submenu item 2</a>
          </li>
        </ul>
      </li>
      <li><a href="#">menu item 3</a>
      </li>
      <li><a href="#">menu item 4</a>
      </li>
    </ul>
  </div>
  <!-- menu-holder end -->
</div>

＆＃13;

Answer 2

以下是您正在寻找的语义正确的实现：

HTML

    <nav>
      <div class="container">
        <ul class="primary">
          <li class="active"><a href="#">Item</a></li>
          <li class=""><a href="#">Item</a></li>
          <li class=""><a href="#">Item</a>
            <div class="secondary-nav-container">
              <ul class="secondary">
                <li class=""><a href="#">Sub Item 1</a></li>
                <li class=""><a href="#">Sub Item 2</a></li>
                <li class=""><a href="#">Sub Item 3</a></li>
              </ul>
            </div>
          </li>
          <li class=""><a href="#">Item 4</a></li>
        </ul>
      </div>
    </nav>

CSS

    nav .primary-navigation {
      float: right;
      margin: 0px;
    }
    nav .primary-navigation li {
      float: left;
      margin: 0px;
      padding: 0px;
    }
    nav .primary-navigation li:last-child {
      margin-right: 10px;
    }

    nav .primary-navigation a {
      display: inline-block;
      width: 100%;
      padding: 0px 10px;
      text-decoration: none;
      font-size: 1.2em;
      line-height: 2.2em;
    }

    nav.mobile .secondary-navigation a {
      font-size: 1em;
      line-height: 2.3em;
    }

    nav .secondary-nav-container {
      position: absolute;
      top: 36px;
      left: 0px;
      width: 100%;
      min-height: 36px;
      display: none;
    }

    nav .primary-navigation > li.active .secondary-nav-container,
    nav .primary-navigation > li:hover .secondary-nav-container {
      display: block;
      z-index: 4;
    }

    nav .primary-navigation > li:hover .secondary-nav-container,
    nav.mobile .primary-navigation > li:hover .secondary-nav-container{
      z-index: 5;
    }

    nav .secondary-navigation, nav.mobile .secondary-navigation {
      float: right;
    }

上下文：我为几年前开发的CMS设计了这个HTML / CSS唯一的解决方案。

显示/隐藏效果：这些可以使用css过渡或使用javascript来完成。

嵌套的水平CSS菜单

2 个答案:

HTML

CSS