css - 浏览器缩放时对齐中断

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