創建一個包含5個鏈接的框，每個框都帶有彈出式泡泡w /詳細信息

Question

這不應該是個大問題，我不認爲。我只需要一個盒子中的五個鏈接，每個鏈接都會讓他們自己彈出更多的信息。

我有代碼，最初打算用作導航欄，它實際上是一個偉大的導航欄，但我已經剝離它只是實際的功能，所以我可以弄清楚如何使它的工作原理我的目的之前，我將它添加到我的真實代碼。

它是無序列表格式，我可以使用它，但只有模型中的一個鏈接具有彈出效果。我需要每個鏈接都有不同的泡泡，所以我需要能夠針對特定的ID或類，但出於某種瘋狂的原因，當我這樣做時，它不起作用。

<ul id="menu"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Categories</a> 
     <ul> 
      <li><a href="#">CSS</a></li> 
      <li><a href="#">Graphic design</a></li> 
      <li><a href="#">Development tools</a></li> 
      <li><a href="#">Web design</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Work</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

#menu ul { 
    margin: 20px 0 0 0; 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1; 
    background: #444; 
    background: linear-gradient(#444, #111); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    border-radius: 3px; 
    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

這一切都完美的作品，只要我保持這個代碼不變事情是這樣的。問題是沒有辦法確定哪個元素我想彈出，除非我給每個人一個單獨的ID，但是當我這樣做時，它停止工作。

你也應該知道，這一切都是CSS和HTML是很重要的，因爲我對JavaScript和JQuery的知識還很少，甚至還沒有到工作階段。

如果我沒有可以理解地發佈我的問題，請說出來，然後我會盡力澄清出現的任何差異，但請幫助我。我正在爲我父親的客戶的網站這樣做，所以賭注肯定會小很多。

感謝您看這個可恥長的問題/ :)

Answer 1

這看起來像一個標準的彈出式菜單。如果你只需要每個鏈接的子菜單，你應該可以像這樣添加它們：

<ul id="menu"> 
<li><a href="#">Home</a></li> 
<li> 
    <a href="#">Categories</a> 
    <ul> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">Graphic design</a></li> 
     <li><a href="#">Development tools</a></li> 
     <li><a href="#">Web design</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Work</a> 
    <ul> 
     <li><a href="#">Work 1</a></li> 
     <li><a href="#">Work 2</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">About</a> 
    <ul> 
     <li><a href="#">About 1</a></li> 
     <li><a href="#">About 2</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Contact</a> 
    <ul> 
     <li><a href="#">Contact 1</a></li> 
     <li><a href="#">Contact 2</a></li> 
    </ul> 
</li> 
</ul> 

不需要其他CSS更改。不需要特殊的ID。讓我們知道它是否有效。