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。如果有效，请告诉我们。

创建一个包含五个链接的框，每个链接都有一个包含更多信息的弹出式气泡

1 个答案: