How do I create a 'linklist' like a tooltip with HTML and CSS or jQuery and CSS?

I hope you can help solving my problems. Any help is much appreciated. Thank you in advance.

HTML&CSS:

I tried creating a 'linklist' with HTML and CSS which you can find in this fiddle. Unfortunately and logically the 'linklist' displays by hovering over the link 'Linklist', by leaving the link there won't be any display.

My problem is that I can't click 'Link 1' or 'Link 2' because of leaving 'Linklist'. Well, I see two options here, but maybe I'm wrong. 1. By hovering over 'Linklist' the 'linklist' appears for e.g. 1 minute. 2. Is it possible to concat more links li开发者_运维百科ke I did? 'Linklist' will be a link to a website. By hovering over that link there should be a list of links displaying which I can choose.

Any ideas?

---

jQuery and CSS:

Referring to my first problem I'd like to convert my idea to jQuery.

These links include an image. By clicking it a new site will be loaded.

<a href="?FRUIT=banana><img height="40" src="../../banana.jpg?format=raw" title="Banana - yellow"></a>
<a href="?FRUIT=apple><img height="40" src="../../apple.jpg?format=raw" title="Apple - green"></a>

My first question is whether I should use .mouseover() or .hover(). Well, by hovering over that image a box with Link1 and Link2 should appear. Like a context-menu, but instead of right-clicking I'd like to see that box by moving the mouse over it.

This is how I get the color of the title and border the image with 3px dotted green:

var colors = ['yellow','green'];
for(var i = 0;i < colors.length;i++){
 $('img[title$='+colors[i]+']').css('border','3px dotted green');
 var title =  $('#'+colors[i]).attr('title');
}

Instead of bordering it, my wish is to let a box including two links appear.

Any hint or help would be very very helpful.

---

It sounds to me that you are more after a flyout navigation solution rather then a tooltip. This can be done mostly with HTML and CSS, javascript is only need to mimic :hover behaviour on something other then a <a>.

See here for an example http://www.positioniseverything.net/css-flyout.html

---

Your problem happened because of this:

a.tooltip span {
    margin-left:8px;
}

With this you were creating an 'empty' area between the link and the span, so when you moused over this 'empty' area, the hover was not in effect anymore, that's why the span disappeared.

If you remove it, it works.