浏览器缩放时对齐中断

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;
}