drop downs are not working in below code

Question

Drop downs are not working.

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="ait0207_sem7_.WebForm13" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<style>

.dropdown-menu > li > a {

display: block;

padding: 3px 20px;

clear: both;

font-weight: 400;

line-height: 1.42857143;

color: #333;

white-space: nowrap;

}

.dropdown-menu > li > a {

color: gray;

padding: 10px;

padding-left: 20px;

}

.dropdown-menu li a {

-webkit-transition: all 0.7s ease;

transition: all 0.7s ease;

-o-transition: all 0.7s ease;

}

.hvr-bounce-to-right {

display: inline-block;

vertical-align: middle;

-webkit-transform: translateZ(0);

transform: translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-osx-font-smoothing: grayscale;

position: relative;

-webkit-transition-property: color;

transition-property: color;

-webkit-transition-duration: 0.5s;

transition-duration: 0.5s;

}

.hvr-bounce-to-right:before {

background: #f5eff5 !important;

}

.hvr-bounce-to-right:active:before,

.hvr-bounce-to-right:focus:before,

.hvr-bounce-to-right:hover:before {

-webkit-transform: scaleX(1);

transform: scaleX(1);

-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);

transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);

}

.hvr-bounce-to-right:before {

content: "";

position: absolute;

z-index: -1;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: #2098d1;

-webkit-transform: scaleX(0);

transform: scaleX(0);

-webkit-transform-origin: 0 50%;

transform-origin: 0 50%;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transition-duration: 0.5s;

transition-duration: 0.5s;

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out;

}

.dropdown-menu {

opacity: 0;

visibility: hidden;

transform-origin: top;

animation-fill-mode: forwards;

transform: scale(0.9, 0.7) translateY(-20px);

display: block;

transition: all 80ms ease;

}

.open > .dropdown-menu {

transform: scale(1, 1) translateY(0);

opacity: 1;

visibility: visible;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="dropdown">

<a href="javascript:void(0)" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" aria-expanded="false">Dropdown

<span class=" fa fa-angle-down" style="font-size: 12px;"></span>

</a>

<ul class="dropdown-menu animated fadeInUp ">

<li>

<a href="javascript:void(0);" class="hvr-bounce-to-right">Submenu 1</a>

</li>

<li>

<a href="javascript:void(0);" class="hvr-bounce-to-right">

<span class="badge bg-red pull-right">20%</span>

<span>Submenu 2</span>

</a>

</li>

<li>

<a href="javascript:void(0);" class="hvr-bounce-to-right">Submenu 3</a>

</li>

<li><a href="login.html" class="hvr-bounce-to-right">Submenu 4</a>

</li>

</ul>

</div>

<div class="container">

<br>

<br>

<div class="dropdown ">

<a href="#" id="drop1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" role="button">Dropdown <span class="caret"></span></a>

<ul role="menu" class="dropdown-menu" aria-labelledby="drop1">

<li role="presentation">

<a href="#" role="menuitem">Link 1</a>

</li>

<li role="presentation">

<a href="#" role="menuitem">Cell</a>

</li>

<li role="presentation">

<a href="#" role="menuitem">Science</a>

</li>

</ul>

</div>

</div>

</asp:Content>