Display language menu in ordered columns

_config.yml

@@ -1,23 +1,23 @@
 langsorder:
-- id: de
+- de
-- id: id
+- en
-- id: en
+- es
-- id: es
+- fr
-- id: fr
+- id
-- id: it
+- it
-- id: hu
+- hu
-- id: nl
+- nl
-- id: pl
+- pl
-- id: pt_BR
+- pt_BR
-- id: ru
+- ru
-- id: ro
+- ro
-- id: sv
+- sv
-- id: tr
+- tr
-- id: bg
+- bg
-- id: zh_CN
+- zh_CN
-- id: zh_TW
+- zh_TW
-- id: ar
+- ar
-- id: fa
+- fa
 
 langs:
   ar: ألعربية

_layouts/base.html

@@ -32,16 +32,18 @@ if(typeof(legacyIE)==='undefined'){
 {% endif %}
   <div class="head"><div>
     <select id="langselect" class="langselect" onchange="window.location=this.value;">
-    {% for lang in site.langsorder %}{% if lang.id == page.lang %}{% assign active = ' selected="selected"'%}{% else %}{% assign active = ''%}{% endif %}
+    {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' selected="selected"'%}{% endif %}
-      <option value="/{{ lang.id }}/{% translate {{page.id}} url {{lang.id}} %}"{{ active }}>{{ site.langs[lang.id] }}</option>
+          <option value="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</option>
     {% endfor %}
     </select>
     <ul class="lang">
       <li><a href="#" onclick="return false;">{{ site.langs[page.lang] }}</a>
       <ul>
-      {% for lang in site.langsorder %}{% if lang.id != page.lang %}
+        {% for lang in site.langsorder %}{% assign active = ''%}{% if lang == page.lang %}{% assign active = ' class="active"'%}{% endif %}
-        <li><a href="/{{ lang.id }}/{% translate {{page.id}} url {{lang.id}} %}">{{ site.langs[lang.id] }}</a></li>
+        {% cycle 'start': '<li><ul>', '', '', '', '', '', '', '', '', '' %}
-      {% endif %}{% endfor %}
+          <li><a href="/{{ lang }}/{% translate {{page.id}} url {{lang}} %}"{{ active }}>{{ site.langs[lang] }}</a></li>
+        {% cycle 'end': '', '', '', '', '', '', '', '', '', '</ul></li>' %}{% endfor %}
+        {% cycle 'end': '', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>', '</ul></li>' %}
       </ul>
       </li>
     </ul>

_less/ie.css

@@ -14,6 +14,20 @@ body{
 	border-right:2px solid #f7f7f7;
 	border-top:2px solid #f7f7f7;
 }
+.lang li ul{
+	top:28px;
+}
+.lang li ul li{
+	zoom:1;
+	display:inline;
+}
+.lang li a,
+.lang li a:link,
+.lang li a:visited,
+.lang li a:active{
+	zoom:1;
+	display:inline;
+}
 
 .menusimple li{
 	zoom:1;

_less/rtl.less

@@ -28,6 +28,7 @@ p{
 }
 .lang li ul li{
 	font-family:Arial, sans-serif;
+	text-align:right;
 }
 .menusimple li a,
 .menusimple li a:active,

_less/screen.less

@@ -210,14 +210,12 @@ table td,table th{
 	list-style:none;
 	padding:0;
 	margin:0;
-	text-align:right;
 	cursor:pointer;
 }
 .lang{
 	position:absolute;
 	right:5px;
 	top:8px;
-	height:30px;
 	border-left:2px solid transparent;
 	border-right:2px solid transparent;
 	border-top:2px solid transparent;
@@ -231,25 +229,37 @@ table td,table th{
 .lang li ul{
 	display:none;
 	right:-2px;
-	top:28px;
 	position:absolute;
 	background-color:#fff;
-	margin-left:-5px;
+	padding:20px;
-	padding-bottom:4px;
+	border:2px solid #ebebeb;
-	border-left:2px solid #ebebeb;
+	white-space:nowrap;
-	border-right:2px solid #ebebeb;
-	border-bottom:2px solid #ebebeb;
 }
 .lang:hover li ul{
 	display:block;
 }
+.lang li ul li{
+	display:inline-block;
+	vertical-align:top;
+	text-align:left;
+	width:180px;
+}
+.lang li ul li ul{
+	position:relative;
+	margin:-4px 0;
+	padding:0;
+	border:0;
+	top:0;
+}
+.lang li ul li ul li{
+	display:block;
+}
 .lang li a,
 .lang li a:link,
 .lang li a:visited,
 .lang li a:active{
 	text-decoration:none;
 	font-size:115%;
-	width:100px;
 	display:inline-block;
 	color:#b8b8b8;
 	padding:4px 8px;
@@ -258,18 +268,17 @@ table td,table th{
 .lang li ul li a:link,
 .lang li ul li a:visited,
 .lang li ul li a:active{
-	padding:2px 8px;
+	padding:4px 0;
-
+	width:180px;
 }
-.lang:hover li a{
+.lang:hover li a,
+.lang li ul li ul li:hover a,
+.lang li ul li ul li a.active{
 	color:#666666;
 }
 .lang:hover li ul li a{
 	color:#b8b8b8;
 }
-.lang li ul li:hover a{
-	color:#666666;
-}
 
 .logo{
 	display:block;