Hi there!

I am working on a website and most of the work is done but I need to spicy up the navigation a bit.

What I have is a vertical navigation on the very left of the site (the site itself is centered). The navigation is built using an unordered list and it looks a bit like this: http://css.maxdesign.com.au/listamatic/vertical08.htm

What I am trying to do now is a popup that opens when I hover over one link of the navigation. That popup should deliver special content to discribe the link better.

The tricky part is that the popup should appear on the left hand side of the navigation.

Normal state:
Item #1
Item #2
Item #3


Mouseover:
INFORMATION -> Item #1 (hover)
Item #2
Item #3

OR

Item #1
Item #2
INFORMATION -> Item #3 (hover)



I hope you understand what I mean. :)

Right, something like this! :)

Here's what I came up with:

CSS:
#navigation li {
position: relative;
}
#navigation li em {
display: none;
}
#navigation li:hover em {
display: block;
left: -13.5em;
position: absolute;
top: -1em;
color: #000;
width: 13em;
background: #FAFAFA;
border: 0.1em solid silver;
font-size: 1.4em;
z-index: 1000;
padding: 0.5em;
font-style: normal;
}
#navigation li em strong {
display: block;
}
#navigation a:hover:before {
content: "<-";
}


HTML:
<div id="navigation">
<ul>
<li><a href="#">item 1</a> <em><strong>Forum</strong>stupid...</em></li>
<li><a href="#">item 2</a> <em><strong>test</strong>strange</em></li>
</ul>
</div>



So far it's working fine in FF but it's sooooooo ugly. :D :D