如何使悬停类与活动类相同

Question

这是小提琴：http://jsfiddle.net/outpbj3c/2/

HTML：

<ul class="mcd-menu">
    <li>
        <a href=""><strong>Home</strong></a>
    </li>
    <li>
        <a href="" class="active"><strong>About us</strong></a>
    </li>
    <li>
        <a href=""> <strong>About us</strong></a>
    </li>
</ul>

我想要帮助两件事：

1. 如何将文本垂直居中与箭头对齐
2. 如何使悬停类与active类
相同

Answer 1

正如评论中提到的那样，对.active和:hover使用相同的样式，因此将.mcd-menu li a:hover添加到.active样式并提供强大的元素margin-top: 9px;和您将得到你需要的，你的代码应该是这样的：

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
  margin-top: 9px;
}

并且：

.mcd-menu li a.active, .mcd-menu li a:hover {
   position: relative;
   color: #e67e22;
   border:0;
   /*border-top: 4px solid #e67e22;
   border-bottom: 4px solid #e67e22;
   margin-top: -4px;*/
   box-shadow: 0 0 5px #DDD;
   -moz-box-shadow: 0 0 5px #DDD;
   -webkit-box-shadow: 0 0 5px #DDD;

   /* == */
   border-left: 4px solid #e67e22;
   border-right: 4px solid #e67e22;
   margin: 0 -4px;
   /* == */
 }

这是 updated fiddle 。

Answer 2

我冒昧重写那个CSS。

http://jsfiddle.net/outpbj3c/7/（编辑代码）

body{
    background: #DEDEDE;
}

ul.mcd-menu{
    list-style-type: none;
    width: 200px;
    margin: 0px;
    padding: 0px;
}

ul.mcd-menu li{
    display: block;
    margin-bottom: 1px;
    background: #FFF;    
    text-transform: uppercase;

}

ul.mcd-menu li a{
    padding: 0px 20px;
    line-height: 50px;
    text-decoration: none;
    display: block;
    position: relative;
    color: #999;
    margin-left: 0px;
    margin-right: 0px; 
    transition: color 300ms linear;
    -o-transition: color 300ms linear;
    -ms-transition: color 300ms linear;
    -moz-transition: color 300ms linear;
    -webkit-transition: color 300ms linear;  
}

ul.mcd-menu li a.active, ul.mcd-menu li a:hover{
      border-left: 4px solid #e67e22;
      border-right: 4px solid #e67e22;  
      margin-left: -4px;
      margin-right: -4px;
      color: #e67e22;
      box-sizing: border-box;
}

ul.mcd-menu li a.active:before, ul.mcd-menu li a:hover:before{
      content: "";
      position: absolute;
      top: 42%;
      left: 0;
      border-left: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;    
}


ul.mcd-menu li a.active:after, ul.mcd-menu li a:hover:after{
      content: "";
      position: absolute;
      top: 42%;
      right: 0;
      border-right: 5px solid #e67e22;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; 
}