html - 隐藏的CSS水平导航子菜单

Question

我对纯 CSS 导航有疑问。我 float 了我的顶级元素，现在我所有的子菜单都隐藏在主导航中。我尝试了清除、定位和 z 索引，但没有任何效果。

我取得的最好成绩是我的顶级菜单在悬停时展开，但我不希望如此。有什么建议吗？

我确定这在某处有答案，但我一直在整个 youtube、博客和堆栈中搜索答案，但找不到我需要的东西。

        html {
	        height: 100%:
        }

        body {
	        height: 100%;
        }	
        	
        #menu-novo-container {
            border-collapse: collapse;
            font-family: tahoma, Arial, helvetica, Serif;
            background-color: #336699;
            min-height: 38px;
            position: relative;
          
        }

        #menu-novo {
            padding: 0;  
            height: inherit;
        }

        #menu-novo * {
            margin: 0;
            padding: 0;
        }

        #menu-novo .menu-novo-item {
            cursor: pointer;
            list-style: none;
            font-size: 16px;
            color: #FFF;
            font-weight: normal;
            padding: 4px 7px 4px 7px;
            border-right: 1px solid white;
            word-wrap: break-word;
            min-height: 38px;
            width: auto;
        }

        #menu-novo .root-item {
            text-align: center;
            float: left;
            height: inherit;
            position: relative;
        }

        .level-1-item,
        .level-2-item,
        .level-3-item {
            font-size: 14px;
            border-left: solid 1px #DEE8F5;
            border-right: solid 1px #DEE8F5;
            border-bottom: solid 1px #DEE8F5;
            height: 30px;
            float: none;
        }

        .level-1-submenu, .level-2-submenu, .level-3-submenu {
	        display: none;
            position: relative;
            top: 100%;
            left: 0;
            z-index: 598;
            width: 100%;
        }
        
        .level-1-submenu {
            bottom: 0;
            left: 0;
        }

        .level-2-submenu {
            top: 0; /*shouldn't this be positioned relative to parent*/
            left: auto;
            right: -99.5%;
        }
        
        #menu-novo .root-item:hover > .level-1-submenu {
            display: block;
        }
                
        #menu-novo .level-1-item:hover > .level-2-submenu {
            display: block;
        }
                
        #menu-novo .level-2-item:hover > .level-3-submenu {
            display: block;
        }

        .menu-novo-link,
        .menu-novo-link:visited,
        .menu-novo-link:active {
            text-decoration: none;
            color: #FFF;
        }
        
        .novo-clear {
            width: 0;
            height: 0;
            clear: both;
        }

<div id="menu-novo-container">
  <ul id="menu-novo">
    <li class="menu-novo-item root-item"> 1
      <ul class="menu-novo-submenu level-1-submenu">
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.1</a></li>
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.2</a></li>
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.3</a></li>
        <li class="menu-novo-item level-1-item">1.4.
          <ul class="menu-novo-sumbenu level-2-submenu">
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
          </ul>
        </li>               
      </ul>
    </li>
  </ul>
</div>

[解决方案] 这一直是我的愚蠢错误。我没有定义背景，它是不可见的，但是……三天的工作就付诸东流了。

Answer 1

试试这个。

      html {
	        height: 100%:
        }

        body {
	        height: 100%;
        }	
        	
        #menu-novo-container {
            border-collapse: collapse;
            font-family: tahoma, Arial, helvetica, Serif;
            background-color: #336699;
            min-height: 38px;
            position: relative;
          
        }

        #menu-novo {
          display: inline-block;
          height: inherit;
          margin: 0;
          padding: 0;
          width: 100%;
        }
        #menu-novo * {
            margin: 0;
            padding: 0;
        }

        #menu-novo .menu-novo-item {
            cursor: pointer;
            list-style: none;
            font-size: 16px;
            color: #FFF;
            font-weight: normal;
            padding: 4px 7px 4px 7px;
            border-right: 1px solid white;
            word-wrap: break-word;
            min-height: 38px;
            width: auto;
        }

      #menu-novo .root-item {
  float: left;
  height: inherit;
  position: relative;
  text-align: left;
  width: 100%;
}

        .level-1-item,
        .level-2-item,
        .level-3-item {
            font-size: 14px;
            border-left: solid 1px #DEE8F5;
            border-right: solid 1px #DEE8F5;
            border-bottom: solid 1px #DEE8F5;
            height: 30px;
            float: none;
        }

        .level-1-submenu, .level-2-submenu, .level-3-submenu {
	        display: none;
            position: relative;
            top: 100%;
            left: 0;
            z-index: 598;
            width: 100%;
        }
        
        .level-1-submenu {
            bottom: 0;
            left: 0;
        }

        .level-2-submenu {
            top: 0; /*shouldn't this be positioned relative to parent*/
            left: auto;
            right: -99.5%;
        }
        
        #menu-novo .root-item:hover > .level-1-submenu {
            display: block;
        }
                
        #menu-novo .level-1-item:hover > .level-2-submenu {
            display: block;
        }
                
        #menu-novo .level-2-item:hover > .level-3-submenu {
            display: block;
        }

        .menu-novo-link,
        .menu-novo-link:visited,
        .menu-novo-link:active {
            text-decoration: none;
            color: #FFF;
        }
        
        .novo-clear {
            width: 0;
            height: 0;
            clear: both;
        }

<div id="menu-novo-container">
  <ul id="menu-novo">
    <li class="menu-novo-item root-item"> 1
      <ul class="menu-novo-submenu level-1-submenu">
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.1</a></li>
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.2</a></li>
        <li class="menu-novo-item level-1-item"><a href="#" class="menu-novo-link">1.3</a></li>
        <li class="menu-novo-item level-1-item">1.4.
          <ul class="menu-novo-sumbenu level-2-submenu">
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.1</a></li>
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.2</a></li>
            <li class="menu-novo-item level-2-item"><a href="#" class="menu-novo-link">1.4.3</a></li>
          </ul>
        </li>               
      </ul>
    </li>
  </ul>
</div>