为什么超链接的下划线会和字体颜色不一样呢？

Question

新手学HTML/CSS写静态网页的时候，发现li中的超链接，当鼠标悬停在上面时，下划线的颜色和字体不一样，没有找出CSS代码中哪里设置了颜色。

<li class="menu-item clearfloat">
                        <div class="title"><a href="#">
                            <h4>Voluptate cillum fugiat.</h4>
                            <p class="comment">Chess, tomato, mushroom, onions</p>
                        </a></div>
                        <div class="line"></div>
                        <div class="price">$50</div>
                    </li>

.menu-list .title, .menu-list .line{
    float: left;
}

.menu-list .price{
    float: right;
}

/*.menu-list .title{
    width: 230px;
}*/

.menu-item .line{
    width: 192px;
    margin-top: 10px;
    margin-left: 45px;
    border-top: 1px solid #e3e1e1;
}

/*.menu-item .title a:hover{
    text-decoration: none;
}*/

.menu-item .title h4{
    color: #D6D6D6;
}

.menu-item .comment{
    margin-top: 4px;
    color: #b7b7b7;
    font-size: 12px;
}

Answer 1

看看是不是全局css中 对a标签添加了样式

Answer 2

在a标签中：
文字颜色是在'color'属性，
下划线样式是在'border-bottom'属性，
你只设置了'color'，未设置'border-bottom'

Answer 3

看看是否设置了 text-decoration-color

Answer 4

已解决：HTML中的div层次关系太多，导致CSS选择出现了问题。所以默认显示下划线为蓝色。只要单独再CSS中设置a标签的字体颜色，再给title中的p元素设置字体颜色即可。
之前对a标签中的h4设置颜色并没有影响到a标签hover样式。