Question

I had in my mind that it would not be hard to add an anchor tag that, when hovered or clicked, would cause a CSS flyout with more links in it to appear.

As it is now, a set of normal anchor tags are inside of a span which is inside of an li. I want to add this hover flyout link to be in the same location, the same as one of the links but instead of being a normal link, do the flyout. I found all kinds of code online but none of it seems to work in this location:

<li>
     Introduction to Something
     <span>
          <a target="_blank" href="http://http...file.html">Watch Slideshow</a>
          <a href="javascript:void(window.open('/file/853','file','height=650,width=1000,status=yes,toolbar=no,menubar=no,location=no'));">View File</a>
          <a target="_blank" href="http://file....pdf">Print</a>

          <a href="#">FLY OUT MENU ITEM</a>
     </span>
</li>

Answer 1

I’ve posted a demo, that’s not hugely different to @jeffkee’s answer, over at jsbin, to show how deep it’s possible to go with flyout menus and how simple they can be.

The (x)html is copied below (with notes):

<ul>
    <li>home</li>
    <li>products
        <ul>
            <li><a href="#">CPUs</a>
                <ul>
                    <li><a href="#">AMD<a>
                        <ul>
                            <li><a href="#">AM2</a></li>
                            <li><a href="#">AM3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Intel</a></li>
                </ul>
            </li>
            <li><a href="#">Motherboards</a></li>
            <li><a href="#">PSUs</a></li>
            <li>Hard drives
                <ul>
                    <li><a href="#">HDD</a></li>
                    <li><a href="#">SSD</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Tracking</li>
</ul>

The CSS is as below:

ul {list-style-type: none; width: 8em; border: 1px solid #000; padding: 0;}
/* just to set the base-line for the ul, but note the width. It's important. */

ul li {position: relative; border-top: 1px solid #000; margin: 0; padding: 0; }
/* the position: relative is used to allow its child elements to be absolutely positioned */

ul li:first-child {border-top: 0 none transparent; }
/* to avoid a two-pixel border on the first li (1px li-border + 1px ul-border) */

ul li:hover {background-color: #f90; }
/* just to aid visually */

ul ul {position: absolute; top: -1px; left: 8em; display: none; }
/* sets up all ul elements beneath the parent ul, the -px is to counter the movement forced by the border, bear in mind that the li:first-child doesn't *have* a border, so adjust to taste */

ul > li:hover > ul {display: block; }
/* makes the nested list appear if the parent-li is hovered */