Bootstrap nav tab hover border color 지정

.

.

nav bar로 탭을 만들었는데 마우스를 올렸을 때 효과를 주려고

아래와 같이 css를 작성했는데 먹히지가 않아서 이것 저것 시도해봤다.

.

.col ul li a:hover {
  border: 1px solid #b4b4b5;
  border-bottom-color: #f4f3ef;
}

.

.

일단 탭의 코드는 아래와 같다.

.

//html

		<div class="col">
            <ul class="nav nav-tabs">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#a">1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#b">2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#c">3</a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade show active" id="a">
                <p>1번탭</p>
              </div>
              <div class="tab-pane fade" id="b">
                <p>2번탭</p>
              </div>
              <div class="tab-pane fade" id="c">
                <p>3번탭</p>
              </div>
            </div>

.

.

태그로도 해보고 클래스로도 해봤지만 전혀 먹지를 않아서 고생중이었는데

실수로 :hover를 두번 쳤더니 먹혔다,, 

왜이런걸까..?

.

.

.col ul li a:hover:hover {
  border: 1px solid #b4b4b5;
  border-bottom-color: #f4f3ef;
}

.

.

.

먹혔음;

.

.