最近在学习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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#" class="txt"><span class="glyphicon glyphicon-plus"></span>加入班级</a></li> </ol> </li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#" class="txt" style="color: white;"><span class="glyphicon glyphicon-bell" ></span>通知</a></li> <li class="dropdown" style="margin-right: 20px"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><span class="glyphicon glyphicon-home"></span>我的主页</a></li> <li><a class="txt" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><span class="glyphicon glyphicon-education"></span>教学课堂</a></li> <li><a class="txt" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><span class="glyphicon glyphicon-cog"></span>账号管理</a></li> <li class="divider"></li> <li><a class="txt" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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;}看看效果图：
鼠标悬浮在图标上，自动显示二级菜单内容；同时，鼠标悬浮在二级菜单内容，列表内容会实现放大特效；
存在一个问题：