var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');

nav.click(function(event) {
    if (nav.hasClass('active')) {
        nav.removeClass('active');
        selection.stop().slideUp(200);
    } else {
        nav.addClass('active');
        selection.stop().slideDown(200);
    }
    event.preventDefault();
});

select.click(function(event) {
    // updated code to select the current language
    select.removeClass('active');
    $(this).addClass('active');

    alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});

h2 {
    width: 200px;
    background: #222;
    color:  #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}
ol.select {
    display: none;
}

ol.select > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

ol.select > li:hover {
    background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
    <li data-value="en">English</li>
    <li data-value="de">Deutsch</li>
</ol>

$(function(){
  var close = function() {
    $("ul").each(function() {
      var $thisUl = $(this);    
      if($thisUl.find("li > a.click").length == 0) {
        var $li = $(document.createElement('li')).append($(document.createElement('a')).attr({
          "class": "click selectable visible",
          "href": "#"
        }).text("Select"));
        $thisUl.append($li);
      }
      else {
        $thisUl.find("li > a.click").addClass("visible");
      }
      $thisUl.find("li:has(> a:not(.click))").hide();
      $thisUl.find("li > a.click").show();
    });
  };

  var sentinel = function() {
    $("ul").each(function(){
      var $thisUl = $(this);
      $($thisUl).find("li > a").click(function(event){
        if($(event.target).is('ul li a.visible')) {
          event.preventDefault();
          $thisUl.find("li:has(> a:not(.click))").show();
          $thisUl.find("li > a.selectable").hide();
          $thisUl.find("li > a.click").removeClass("visible");
        }
        else {
          $thisUl.find("li").each(function(){
            $(this).find("a").removeClass("click selectable visible");
            $(this).find("a.selectable").remove();
          });
          $(this).addClass("click visible");
          close();
        }
      });
    });
  };

  var reconnaissance = function() {
    $(document).click(function(event) {
      if(!$(event.target).is('ul li a')) {
        close();
      }
    });
  };

  close();
  sentinel();
  reconnaissance();
});

ul { 
  width: auto;
  margin: 2px auto;
  background-color: #ddd;
  border-top: 1px solid #999;
  border-bottom: 3px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-radius: 8px;
  list-style:none;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: left 2px;
  background-color: transparent;
  cursor: pointer;
}
li > a.click { 
  color: darkgreen; 
  font-weight: bold;
}
li a {
  color:darkblue;
  text-decoration:none;
}
li a:active, li a:hover {
  color:darkred;
  background-color: lightyellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Option 1</a></li>
  <li><a class="click" href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>
</ul>

<ul>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
  <li><a href="#">Option 3</a></li>
</ul>