更改边框的颜色并在悬停时链接

我想在悬停时同时更改边框和链接的颜色。我尝试使用border-bottom: 2px solid #000;on，nav ul li a:hover但问题是，如果链接处于活动状态，即使悬停它也保持红色。

CSS：

nav ul li {
    display: inline-block;
    margin: 0 10px;
}
nav ul li a {
    color:red;
    text-decoration:none;
}
nav ul li a:hover {
    color: #000;
}
nav ul li a.active {
    border-bottom: 2px solid red;
}

HTML：

<nav>
    <ul>
        <li><a class="active" href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

JSFiddle演示