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水平子菜單不工作

回答

相關問題