Question

我的border是糟糕的另类。我该如何解决？

#navigation-menu ul.sf-menu > li > a:hover span {
  border-bottom: 1px solid red;
}

<ul id="main-top-menu" class="sf-menu sf-js-enabled sf-arrows">
  <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-18"><a href=""><span>Accueil</span></a>
  </li>
  <li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="http://#"><span>Présentation</span></a>
  </li>
  <li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152"><a href="http://#"><span>Référence</span></a>
  </li>
  <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="impression-offset/"><span>Impression offset</span></a>
  </li>
  <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-29"><a href="/impression-numerique-grand-format/" class="sf-with-ul"><span>Impression numerique grand format</span></a>
    <ul class="sub-menu" style="float: none; width: 12.7143em; display: none;">
      <li id="menu-item-151" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-151" style="white-space: normal; float: left; width: 100%;"><a href="http://#" style="float: none; width: auto;"><span>Fabrication publicitaire</span></a>
      </li>
    </ul>
  </li>
  <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="/impression-numerique-petit-format/"><span>Impression numerique petit format</span></a>
  </li>
  <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="contact"><span>Contact</span></a>
  </li>
</ul>

Answer 1

这适用于所有链接

a span {
text-decoration: none;
}

a span:hover {
border-bottom:1px solid red;
}

进一步缩小你的风格

.menu-item-30 a span:hover {
border-bottom:1px solid red;
}

Answer 2

mongod.conf

#main-top-menu > li > a:hover span {
  border-bottom: 1px solid red;
}

悬停红线时会显示为边框，但仍会保留蓝线，以便将<ul id="main-top-menu" class="sf-menu sf-js-enabled sf-arrows"> <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-18"><a href="">Accueil</a> </li> <li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a href="http://#">Présentation</a> </li> <li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152"><a href="http://#">Référence</a> </li> <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="impression-offset/">Impression offset</a> </li> <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-29"><a href="/impression-numerique-grand-format/" class="sf-with-ul">Impression numerique grand format</a> <ul class="sub-menu" style="float: none; width: 12.7143em; display: none;"> <li id="menu-item-151" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-151" style="white-space: normal; float: left; width: 100%;"><a href="http://#" style="float: none; width: auto;">Fabrication publicitaire</a> </li> </ul> </li> <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="/impression-numerique-petit-format/">Impression numerique petit format</a> </li> <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="contact">Contact</a> </li> </ul>添加到text-decoration: none;

Answer 3

您最好的选择是将text-decoration: none;用于<a>元素并将边框应用于范围（正常和悬停期间）。

http://codepen.io/johnniebenson/pen/GZVJEE

ul.sf-menu > li > a {
    text-decoration: none;
    color: #000;
}

ul.sf-menu > li > a span {
    border-bottom: 1px solid #000;
}

ul.sf-menu > li > a:hover span {
    border-bottom: 1px solid #cc0000;
}

悬停菜单边框底部

3 个答案: