鼠标滑过，展示下拉菜单的实例代码

鼠标滑过，展示下拉菜单的一个特效，具体代码如下： html文件代码： div class="user" div class="dropdown" a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;" {% if login_user_pic is not None %} img src="{{static_url("upload/img/" + login_user_pic)}}" class="img-circ

   <div class="user">
          <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">
              
              {% if login_user_pic is not None %}
              <img src="{{static_url("upload/img/" + login_user_pic)}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
              {% else %}
              <img src="{{static_url("img/user.jpg")}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
              {% end %}
              <b class="caret" style="margin-top: -9px;"></b>
            </a>
            <ul class="dropdown-menu">
              <li >
                <a href="/users/{{login_user_id}}"><span class="glyphicon glyphicon-user" style="height: 30px;"> 我的主页</span></a>
              </li>
              <li >
               <a href="/setting/basic"><span class="glyphicon glyphicon-wrench" style="height: 30px;"> 设置</span></a>
              </li>
              <li>
                <a href=""><span class="glyphicon glyphicon-phone" style="height: 30px;"> 联系我们</span></a>
              </li>
              <li>
                <a href="/logout"><span class="glyphicon glyphicon-off" style="height: 30px;"> 退出 {{login_user}}</span></a>
              </li>
            </ul>
          </div>
        </div>

//鼠标滑过导航栏下拉菜单展开
  var timer;
  $(".user").mouseover(function(){
    clearTimeout(timer);
    $(".dropdown-menu").show();
  });
  $(".user").mouseout(function(){
    timer = setTimeout(function(){
      $(".dropdown-menu").hide();
    },100);
  });
  $(".dropdown-menu").mouseover(function(){
    clearTimeout(timer);
    $(".dropdown-menu").show();
  });
  $(".dropdown-menu").mouseout(function(){
    $(".dropdown-menu").hide();
  });