Выравнивание перерывов в браузере zoom

Question

Может кто-нибудь мне помочь?

Когда я наводил курсор на значок, он должен иметь красную рамку ниже значка, который выравнивается с красной рамкой под текстом. Тем не менее, он ломается от масштабирования браузера, и у меня проблемы с его выравниванием. Ниже приведен скриншот:

Ниже то, что я до сих пор.

<ul class="dropdown-menu mega-dropdown-menu MyMenu-1" style="display: block;"> 
<li> 
    <span data-toggle="MyMenu-1-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></span> 
    <a class="text-light-black" href="#">Menu 1</a> 
</li> 
<li> 
    <span data-toggle="MyMenu-2-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black" ></span> 
    <a class="text-light-black" href="#">Menu 2</a> 
</li> 
<li> 
    <span data-toggle="MyMenu-3-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></span> 
    <a class="text-light-black active" href="#">Menu 3</a> 
</li> 
<li> 
    <span data-toggle="MyMenu-4-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black" ></span> 
    <a class="text-light-black" href="#">Menu 4</a> 
</li> 
<li> 
    <span data-toggle="MyMenu-5-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></span> 
    <a class="text-light-black" href="#">Menu 5</a> 
</li></ul> 

CSS код

.mega-dropdown-menu li { 
    list-style: none; 
    display: inline-block; 
} 
.mega-dropdown-menu li span:hover { 
    border-bottom: 2px solid #990000; 
    border-bottom-width: medium; 
    border-color: #990000; 
    cursor: pointer; 
    padding-bottom: 1.8px; 
    vertical-align: top; 
    display: inline-block; 
} 
.mega-dropdown-menu li span span { 
    padding-right: 13px; 
} 
.text-light-black { 
    color: #1a1a1a !important; 
    font-weight: normal !important; 
    font-size: 20px; 
} 
.text-light-black { 
    color: #1a1a1a !important; 
    font-weight: normal !important; 
    font-size: 20px; 
} 
.mega-dropdown-menu > li a:hover, .mega-dropdown-menu > li a.active { 
    border-bottom: 2px solid #990000; 
    border-bottom-width: medium; 
    border-color: #990000; 
    text-decoration: none; 
    display: inline-block; 
} 

Примечание: значок должен использовать другой элемент, так как он будет иметь другое меню, подменю при нажатии в то время как a тег будет перенаправление на другую страницу.

Answer 1

Я сделал некоторые изменения на вашем CSS. смотри пример в jsFiddle демо: https://jsfiddle.net/hamzanisar/9ngw397k/5/

<ul class="mega-dropdown-menu MyMenu-1" style="display: block;"> 
<li> 
    <i data-toggle="MyMenu-1-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></i> 
    <a class="text-light-black" href="#">Menu 1</a> 
</li> 
<li> 
    <i data-toggle="MyMenu-2-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black" ></i> 
    <a class="text-light-black" href="#">Menu 2</a> 
</li> 
<li> 
    <i data-toggle="MyMenu-3-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></i> 
    <a class="text-light-black active" href="#">Menu 3</a> 
</li> 
<li> 
    <i data-toggle="MyMenu-4-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black" ></i> 
    <a class="text-light-black" href="#">Menu 4</a> 
</li> 
<li> 
    <i data-toggle="MyMenu-5-1" class="glyphicon glyphicon glyphicon-menu-right block text-light-black text-light-black"></i> 
    <a class="text-light-black" href="#">Menu 5</a> 
</li></ul> 

CSS

.mega-dropdown-menu li { 
    list-style: none; 
    display: inline-block; 
} 
.mega-dropdown-menu li i{ 
    vertical-align: middle; 
    border-bottom: 2px solid transparent; 
    border-bottom-width: medium; 
     padding-bottom: 1.8px; 
} 
.mega-dropdown-menu li i:hover { 
    border-bottom: 2px solid #990000; 
    border-bottom-width: medium; 
    border-color: #990000; 
    cursor: pointer; 
    vertical-align: middle; 
    display: inline-block; 
} 

.text-light-black { 
    color: #1a1a1a !important; 
    font-weight: normal !important; 
    font-size: 20px; 
} 
.text-light-black { 
    color: #1a1a1a !important; 
    font-weight: normal !important; 
    font-size: 20px; 
} 
.mega-dropdown-menu > li a:hover, .mega-dropdown-menu > li a.active { 
    border-bottom: 2px solid #990000; 
    border-bottom-width: medium; 
    border-color: #990000; 
    text-decoration: none; 
    display: inline-block; 
}