css水平子菜单不工作

我正在尝试创建一个css水平菜单。问题是我的子菜单不会漂浮..css水平子菜单不工作

我做错了什么？

我的HTML：

<ul class="nav"> 

    <li class="button"><a href="#"><span>Je Studie</span></a> 
     <ul> 

      <li><a href='#'>Programma</a></li> 
      <li><a href='#'>Begeleiding</a></li> 
      <li><a href='#'>Locaties</a></li> 
      <li><a href='#'>Open dag</a></li> 
      <li><a href='#'>Toelatingseisen</a></li> 
      <li><a href='#'>Kosten</a></li> 
      <li><a href='#'>Aanmelden</a></li> 
      <li><a href='#'>Nieuws</a></li> 
     </ul> 
    </li> 
    <li class="button"><a href = '#'><span>Voor ouders</span></a></li> 

    <li class="button"><a href = '#'><span>Voor decanen</span></a></li> 

    <li class="button"><a href = '#'><span>Voor bedrijven</span></a></li> 

    <li class="button"><a href = '#'><span>Contact</span></a></li> 
</ul>

我的CSS是这样的：

.nav{position:relative;} 
.nav a{display:block; color:black;} 


.nav li{ 
    float:left; 
    margin:0; 

    position:relative; 

} 
.nav ul{visibility:hidden; position:absolute; top:100%; left:0;} 
.nav li:hover>ul{visibility:visible; }

的感谢！

来源

2013-10-22 FFBbodie

正如一个建议，我会用'显示： none;'和'display：block;'而不是'visibility'，但它对我来说似乎很好。我想我不明白这个问题。 – usernolongerregistered

在这里看起来很好，也许可以解释你的意思是“不会浮动”，也许你正在寻找问题的浏览器，这将有助于缩小问题的范围！ –

这是工作例如

HTML

<ul class="nav"> 

    <li class="button"><a href="#"><span>Je Studie</span></a> 
     <ul> 

      <li><a href='#'>Programma</a></li> 
      <li><a href='#'>Begeleiding</a></li> 
      <li><a href='#'>Locaties</a></li> 
      <li><a href='#'>Open dag</a></li> 
      <li><a href='#'>Toelatingseisen</a></li> 
      <li><a href='#'>Kosten</a></li> 
      <li><a href='#'>Aanmelden</a></li> 
      <li><a href='#'>Nieuws</a></li> 
     </ul> 
    </li> 
    <li class="button"><a href = '#'><span>Voor ouders</span></a></li> 

    <li class="button"><a href = '#'><span>Voor decanen</span></a></li> 

    <li class="button"><a href = '#'><span>Voor bedrijven</span></a></li> 

    <li class="button"><a href = '#'><span>Contact</span></a></li> 
</ul>

的CSS

.nav a{display:block; color:black;} 
.nav li{ 
    float:left; 
    margin:0; 
    list-style: none; 
    position:relative; 
    margin-right: 20px; 

} 
.nav ul{ position:absolute; top:100%; left:0;width: 300px;display: none;} 
.nav ul li{float: left;width: 100px;} 
.nav li:hover>ul{ display: block;}

来源

2013-10-22 19:52:40 David

<nav id="navbar"> <li> <ul> <li><a href='#'>Programma</a></li> <li><a href='#'>Begeleiding</a></li> <li><a href='#'>Locaties</a></li> <li><a href='#'>Open dag</a></li> <li><a href='#'>Toelatingseisen</a></li> <li><a href='#'>Kosten</a></li> <li><a href='#'>Aanmelden</a></li> <li><a href='#'>Nieuws</a></li> </ul> </li> </nav>

来源

2014-07-03 08:35:31 user3800453

CSS #navbar li {display：inline-block;} – user3800453

对不起，我不知道在此网站上发布答案的正确方法:-P – user3800453

css水平子菜单不工作

回答

相关问题