创建一个包含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。让我们知道它是否有效。