Question

I just need five links in a box to each make a bubble of their own pop up with more information.

I have code, which was originally intended for use as a nav bar, and it's actually a great nav bar, but I've stripped it down to just the actual function so I can figure out how to make it work for my purposes before I add it to my real code.

It's in an unordered list format, which I can work with, but only one of the links in the model has a pop-up effect. I need each of my links to have a different bubble, so I need to be able to target a specific id or class, but for some crazy reason, it doesn't work when I do that.

<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;
}

It all works perfectly, as long as I keep this code intact the way it is. The problem is that there's no way to identify which element I want to pop-up unless I give each of them a separate id, but when I do that, it stops working.

You should also know that it's important that this all be CSS and HTML, because my knowledge of JavaScript and jQuery is still very small and not even to the working phase yet.

I'm doing this for the website of a client of my dad's so the stakes could definitely be a lot smaller.

No correct solution

OTHER TIPS

This looks like a standard pop-up menu. If you just need sub-menus for each link, you should be able to just add them in like this:

<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>

No other CSS changes should be needed. No special id's should be needed. Let us know if it works.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top