Html 导航栏上的Css转换

我想把一个过渡到我的导航栏，我不知道该怎么做。正如你可以看到的图片，我想把一个颜色下面的一个链接像“家”当悬停黄色将出现，当它悬停到另一个链接时，它将出现，另一个将出现。我该怎么做？请给我一些想法

这是我的html代码

             <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
            <img class="img-responsive" src="images/brandz.png" >
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Students</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                     <img src="images/logo.png" class="logo">
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>

---

如果您只想让文本在悬停时变为黄色，那么 添加此代码：

ul.nav.navbar-nav li a:hover {
  color: yellow;
}

我创造了小提琴：

您还可以添加一个过渡，使其看起来更酷（我在小提琴中将其设置为橙色，以真正看到差异）：

“下面的线”：

---

如果您只希望文本在悬停时变为黄色，则 添加此代码：

ul.nav.navbar-nav li a:hover {
  color: yellow;
}

我创造了小提琴：

您还可以添加一个过渡，使其看起来更酷（我在小提琴中将其设置为橙色，以真正看到差异）：

“下面的线”：

---

您可以使用边框底部进行操作。默认情况下，将其设置为透明，给它一个过渡，然后在

：hover

上淡入淡出

---

您可以使用边框底部进行操作。默认情况下，将其设置为透明，给它一个过渡，然后在

：hover

上淡入淡出

---

以下是我认为您正在努力实现的一个简单片段

ul{
背景#3366FF；
}
李{
显示：内联块；
填充：10px0；
}
李阿{
显示：块；
颜色：白色；
填充：50px 50px；
文字装饰：无；
边框底部：2倍纯色透明；
}
李娜：停下来{
颜色：#33FF66；
边框底部：2个实心#33FF66；
}

以下是我认为您正在努力实现的一个简单片段

ul{
背景#3366FF；
}
李{
显示：内联块；
填充：10px0；
}
李阿{
显示：块；
颜色：白色；
填充：50px 50px；
文字装饰：无；
边框底部：2倍纯色透明；
}
李娜：停下来{
颜色：#33FF66；
边框底部：2个实心#33FF66；
}

请创建到css和html的Im noob。我不知道JSFIDLE是什么，先生对不起。请创建Im noob到css和html。我不知道jshiddle是什么，先生对不起。我想要链接下面的黄色，女士。我想要链接下面的黄色，女士。我想要链接下面的边框，女士。我想要链接下面的黄色，女士。我想要链接下面的边框，女士。女士：）谢谢你，先生！：）干杯。在小提琴中，CSS的第18行：

边框底部：2px实心透明-如果这是你的意思，
2px
是厚度，谢谢你，先生！：）干杯。在小提琴中，CSS的第18行：
边框底部：2px实心透明-如果这是你的意思，那么
2px
就是厚度。谢谢你的努力：）谢谢你的努力：）
ul.nav.navbar-nav li a {
  transition: color 1s ease;
}
ul.nav.navbar-nav li a:hover {
  color: yellow;
}

ul.nav.navbar-nav li a {
  transition: all 1s ease;
}
ul.nav.navbar-nav li a:hover {
  color: yellow;
  border-bottom: 1px solid yellow;
}