How to solve hover problem

The hover banner used to be as above.
The reason was due to the height of those elements.
To solve it, just go to /Themes/CustomMicroAnalytix/View/Catalog, modify the TopMenu.cshmtl as below

The key code here is to amend

if (subCategoryCounter <= 3) 

TO

if (subCategoryCounter <= 2)

---

     <li><a href="@Url.RouteUrl("HomePage")"><i class="glyphicon glyphicon-home"></i></a></li>

@if (Model.Categories.Count > 0)
{
    <li class="has-mega-menu">
        <a href="#" class="">
            SHOP BY CATEGORY
        </a>
        <div class="top-menu-triangle"></div>
        <div class="mega-menu">
            <div class="row">
                @foreach (var category in Model.Categories)
                {
                    var cat = categories.Where(c => c.Name == category.Name).SingleOrDefault();
                    var pictureId = cat.PictureId;
                    var picURL = pictureService.GetPictureUrl(pictureId, pictureSize);

                    <div class="col-xs-12 col-md-3 categoryholder">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="group-heading"><strong>@category.Name</strong></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-5 visible-md">
                                <div class="img-holder">
                                    <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })"><img style="border: none; " src="@picURL" alt=""></a>
                                </div>
                            </div>
                            @if (category.SubCategories.Count > 0)
                            {
                                <div class="col-xs-12 col-md-7">
                                    <ul>

                                        @{
                                var subCategoryCounter = 1;
                                        }
                                        @foreach (var subCategory in category.SubCategories)
                                        {
                                            if (subCategoryCounter <= 2)
                                            {
                                                <li><a href="@Url.RouteUrl("Category", new { SeName = subCategory.SeName })">@subCategory.Name</a></li>
                                            }
                                            else
                                            {
                                                <li><a href="@Url.RouteUrl("Category", new { SeName = category.SeName })"><strong>View All</strong></a></li>
                                                break;

                                            }

                                            subCategoryCounter++;
                                        }
                                    </ul>
                                </div>
                            }
                        </div>
                    </div>
                }
            </div>
        </div><!-- /.mega-menu -->
    </li>
}

Other update:
To fix the images size issue with screen less than 992px due to the responsive design, add the following codes

@media (max-width: 992px) {
     .img-holder img{
      max-width:25% !important;
       -webkit-border-radius:3px;
      border-radius:3px;
      vertical-align:middle;
    }
}