Bootstrapのメガメニューで、ヘッダー部分をクリックして他のページに飛ばせたい

Question

以下ページを参考にして、ブートストラップのメガメニューを入れました。
http://bootsnipp.com/snippets/featured/mega-menu-with-carousel-for-stores

ただ、クリックするとメガメニューが出てくる仕様ではなく、ホバーすると出てくる仕様にしたく、以下を参考にしました。
http://www.csshtmljs.com/bootstrap-snippets.php?code-snippets=535&q=HTML+Snippets+for+Twitter+Boostrap+framework+:+bootstrap-css.com
今は、men やwomanのメニューをマウスオーバーするとメガメニューが出ますが、クリックしたら別のページに飛ばせたいのです。

どなたかご教示お願いできますでしょうか。

■ホバーする仕様

<script>
$(document).ready(function(){
$(".dropdown").hover( function() {
 $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("200");
  $(this).toggleClass('open'); }, function() {
   $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("200");
    $(this).toggleClass('open'); });
});
</script>

■ホバーがイキで、クリックすると別ページにいく仕様にしたいのですが、失敗しました。

<script>
$(document).ready(function(){
$(".dropdown").hover( function() {
 $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("200");
  $(this).toggleClass('open'); }, function() {
   $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("200");
    $(this).removeClass('open'); });
});

$(".dropdown").click( function() {
   $('.dropdown-menu', this);
    $(this).removeClass('open'); });
});
</script>

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクもはれます。

[kapimako]

すみません、ご指摘ありがとうございます。修正いたしました。

Answer 1

こうやって変更するようです。なので $().select2() の部分がわからないと処理を追加するのは難しいかもしれません。

【Examples - Select2】
https://select2.github.io/examples.html#programmatic

var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });