diff --git a/media/css/seahub.css b/media/css/seahub.css
index 5ce7e33ced..d7ddd0cb33 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1083,14 +1083,14 @@ textarea:-moz-placeholder {/* for FF */
     margin:0 auto;
 }
 #header {
-    padding:16px 0;
+    padding-top:16px;
     background:#f4f4f7 url('../img/nav.png') center top repeat-x;
     width:100%;
     font-size: 14px;
     margin-bottom:40px;
 }
 #header-inner {
-    height:32px;
+    height:48px;
     width:950px;
     margin:0 auto;
 }
@@ -1416,6 +1416,7 @@ textarea:-moz-placeholder {/* for FF */
 #header .nav-item {
     float: left;
     height:21px;
+    padding-bottom:19px;
     margin:0 14px;
 }
 .ru #header .nav-item {
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 7105d8e4b0..da279fe26f 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -165,35 +165,40 @@ $('#info-bar .close').click(function() {
 
 {% if grps %}
 $(function() {
-    $('#top-nav-grp').after('<div id="top-nav-grp-info" class="top-info-popup hide"></div>').click(function() {
-        var grp_nav = $(this),
-            popup = $('#top-nav-grp-info');
-        
-        if (!$.trim(popup.html())) {
-            var popup_con = '<ul id="top-nav-grp-list">';
-                {% for grp in grps %}
-            popup_con += '<li class="item" data-url="{% url "group_info" grp.id %}" title="{{ grp.group_name }}"> {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name|truncatechars:14 }}</span> <a href="{% url 'group_discuss' grp.id %}" title="{% trans "Discussion" %}" class="a vh fright"><img src="{{MEDIA_URL}}img/msgs.png" alt="" /></a> </li>';
-                {% endfor %}
-            popup_con += '</ul>';
-            popup_con += '<a href="{% url 'group_list' %}" class="item all-grp">{% trans "All Groups" %}</a>';
-            popup.html(popup_con);
-            $('.item', popup).hover(
-                function() {
-                    $(this).addClass('hl').children('.a').removeClass('vh');
-                },
-                function() {
-                    $(this).removeClass('hl').children('.a').addClass('vh');
-                }
-            )
-            .click(function() {
-                location.href = $(this).data('url'); 
-            }); 
-        }
-
-        popup.css({'right': (grp_nav.outerWidth() - popup.outerWidth())/6 * 5});
-        popup.toggleClass('hide');
+    var grp_nav = $('#top-nav-grp');
+    grp_nav.after('<div id="top-nav-grp-info" class="top-info-popup hide"></div>').click(function() {
         return false;
     });
+    var popup = $('#top-nav-grp-info');
+    var popup_con = '<ul id="top-nav-grp-list">';
+    {% for grp in grps %}
+    popup_con += '<li class="item" data-url="{% url "group_info" grp.id %}" title="{{ grp.group_name }}"> {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name|truncatechars:14 }}</span> <a href="{% url 'group_discuss' grp.id %}" title="{% trans "Discussion" %}" class="a vh fright"><img src="{{MEDIA_URL}}img/msgs.png" alt="" /></a> </li>';
+    {% endfor %}
+    popup_con += '</ul>';
+    popup_con += '<a href="{% url 'group_list' %}" class="item all-grp">{% trans "All Groups" %}</a>';
+    popup.html(popup_con);
+    $('.item', popup).hover(
+        function() {
+            $(this).addClass('hl').children('.a').removeClass('vh');
+        },
+        function() {
+            $(this).removeClass('hl').children('.a').addClass('vh');
+        }
+    )
+    .click(function() {
+        location.href = $(this).data('url');
+    });
+
+    popup.css({'right': (grp_nav.outerWidth() - popup.outerWidth())/6 * 5});
+
+    grp_nav.parent('.nav-item').hover(
+        function() {
+            popup.removeClass('hide');
+        },
+        function() {
+            popup.addClass('hide');
+        }
+    );
 });
 {% endif %}