Simple CSS fly out list, not so simple? - html

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>
View File
<a target="_blank" href="http://file....pdf">Print</a>
FLY OUT MENU ITEM
</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>CPUs
<ul>
<li><a href="#">AMD<a>
<ul>
<li>AM2</li>
<li>AM3</li>
</ul>
</li>
<li>Intel</li>
</ul>
</li>
<li>Motherboards</li>
<li>PSUs</li>
<li>Hard drives
<ul>
<li>HDD</li>
<li>SSD</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 */

Answer 2

I don't really see how the fly out is structured. Flyouts are generally set within a link so that when the mother link is hovered, the child shows up..
Check out the most recent flyout menu I did on http://www.feelfabulous.ca/oldindex.php and break down the HTML/CSS. You can do it without any javascript etc. Here's hte HTML structure I have (simplified):
<ul id="menu">
<li>Home</li>
<li>About
<div class="submenu_container">
<ul>
<li>our story</li>
<li>meet our team</li>
<!--<li>press</li>-->
</ul>
</div>
</li>
<li>Spa Menu</li>
<li>Party Packages</li>
<li>Beauty Kits</li>
<li>Goody Bags</li>
</ul>
So .submenu_container is set to display:none, and then #menu li:hover .submenu_container is set to display:block. that's the basic idea of a flyout tyep fo menu. And of course the .submenu_container is absolute positioned so it doesn't affect the shape and form of the page when it pops up.