水平悬停导航菜单

我对HTML和CSS相当陌生。我已经创建了一个水平菜单，并且应该按照下拉菜单进行悬停。水平悬停导航菜单

但是，我希望下拉菜单只有在鼠标悬停在链接上时才会出现，而不是下面的空间占用实际下拉内容。

如果有人可以请指出为什么会发生这种情况，以及我如何解决这个问题，那将会很棒。

这里是HTML和CSS。

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
.navigation ul li { 
 
    display:block; 
 
    position:relative; 
 
    right:40px; 
 
    opacity:0; 
 
    visibility:hidden; 
 
} 
 

 
.navigation li:hover ul li{ 
 
    opacity:1; 
 
    visibility:visible; 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

来源

2016-06-06 zzgooloo

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
ul.inner li { 
 
    display:none; 
 
    position:relative; 
 
    right:40px; 
 
    
 
    
 
} 
 

 
.navigation li:hover ul.inner li{ 
 
    display:block 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul class="inner"> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

来源

2016-06-07 07:33:57

谢谢萨加尔。解决方案奏效。我明白你所做的。你能否向我解释为什么ul.inner李的工作原理和.navigation ul li不会？我基本上只是调用更广泛的类，即.navigation和ul li，而不是为内部ul创建一个类并通过ul.inner li来调用它。感谢 – zzgooloo

，因为你有两个ul导航，所以如果你只在css中使用.navigation ul，那么css将适用于这两个，这就是为什么我使用类的内部ul ..欢迎 –

尽量给主li元素（关于，服务，投资组合...）类= “顶”。然后将CSS文件编辑为.top.li：hover ul li {...}。

来源

2016-06-06 20:50:33

我累了，它不工作...我已经尝试了一堆不同的方法很好，但似乎没有任何工作。我也给了导航ul边界，并显示问题....但如果我改变了那个位置，那么我的下拉不会立即在主李下。 – zzgooloo

水平悬停导航菜单

回答

相关问题