使用jQuery在鼠标悬停时自动生成引导程序下拉菜单

Question

I am trying generating a dynamic bootstrap 3 dropdown menu for sharing on mouse hover.

See this picture

Instead of creating lots of HTML code I decided to generate dynamic menu. Here is what I have done so far:

HTML

<div class="dropdown dropup" >
    <a href="#" class="open-dropdown" data-link="http://google.com">Dropdown</a>
    <ul class="dropdown-menu" role="menu">
        <li id="link1">Link One</li>
        <li id="link2">Link Two</li>
        <li class="caret"></li>
    </ul>
</div>

JQuery

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.open-dropdown').dropdown();
    });
});

Problems

1. It opens the dropdown menu on click not on MOUSE HOVER.
2. I can't place <ul class="dropdown-menu" role="menu"> code outside of <div class="dropdown dropup"> container. See this jsfiddle http://jsfiddle.net/LTk3x/

Answer 1

What about just using some CSS ? :)

.dropdown:hover .dropdown-menu{
    display: block;    
}

Here is a jsFiddle:
http://jsfiddle.net/hMp2r/

Answer 2

You can change $('.open-dropdown').dropdown(); by $('.dropdown-menu').toggle();

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.dropdown-menu').toggle();
    });
});

see http://jsfiddle.net/32xLc/1/