bootstrap实现导航条，并利用hover实现鼠标悬浮特效

最近在学习bootstrap框架，实现顶部导航条并加上hover实现一些特效；

<nav class="nav navbar-inverse" role="navigation">
    <div class="navbar-header">
        <img src="../image/logo.png" width="50" height="50" class="img-circle navbar-left">
        <a href="#" class="navbar-left"><p class="navbar-text" style="color: whitesmoke; font-size: 15px;font-family: 楷体">燕大科技</p></a>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="" class="dropdown-toggle txt" data-toggle="dropdown" style="color: white">
                <span class="glyphicon glyphicon-plus-sign" ></span>加入</a>
            <ol class="dropdown-menu" style="min-width: 110px">
                <!--弹出页面-->
                <li><a href="#" class="txt"><span class="glyphicon glyphicon-plus"></span>加入班级</a></li>
            </ol>
        </li>

        <li><a href="#" class="txt" style="color: white;"><span class="glyphicon glyphicon-bell" ></span>通知</a></li>
        
        <li class="dropdown" style="margin-right: 20px"><a href="#" class="dropdown-toggle txt" data-toggle="dropdown" style="color: white">
            <span class="glyphicon glyphicon-user" ></span>个人</a>
        <ol class="dropdown-menu" style="min-width: 120px">
            <li><a class="txt" href="#"><span class="glyphicon glyphicon-home"></span>我的主页</a></li>
            <li><a class="txt" href="#"><span class="glyphicon glyphicon-education"></span>教学课堂</a></li>
            <li><a class="txt" href="#"><span class="glyphicon glyphicon-cog"></span>账号管理</a></li>
            <li class="divider"></li>
            <li><a class="txt" href="#"><span class="glyphicon glyphicon-off"></span>登出</a></li>
        </ol>
        </li>
    </ul>
</nav>

CSS代码

*{
    
    
       margin: 0;
       padding: 0;
   }
.txt{
    
    
    font-family: 楷体;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    color: white;
}
ul>li:hover>a>span{
    
    
    opacity: 0.5;
    font-size: 17px;
}
ul>li:hover>ol{
    
    
    display: block;
    width: 35px;
}
ul>li>ol>li:hover .txt{
    
    
    background: rgba(100,100,100,0.15);
    font-size: 17px;
}

看看效果图：

鼠标悬浮在图标上，自动显示二级菜单内容；同时，鼠标悬浮在二级菜单内容，列表内容会实现放大特效；
存在一个问题：

<li><a href="#" class="txt" style="color: white;"><span class="glyphicon glyphicon-bell" ></span>通知</a></li>
//这行代码中，引入的txt CSS样式中已经设置color：white；
但是并不能对图标以及与图标相邻的文字产生影响；于是我加入了内置CSS样式，改变颜色；
这个问题大家懂的可以私聊我；