title: Transitions are not working
body: <p>1) Please re-view the code and give your suggestions, i have post my HTML and CSS code, CSS transitions are not working.
  2)I have add transitions to nav ul.menu li , nav ul.menu li a, #drop , #drop li
  3)            </p>
  
  <pre><code>&lt;!DOCTYPE&gt;
              &lt;html&gt;
              &lt;head&gt;
              &lt;title&gt; :: CSS Menu ::&lt;/title&gt;
              &lt;link rel="stylesheet" type="text/css" href="styles.css" &gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;div id="container"&gt;
                &lt;nav&gt;
                  &lt;ul class="menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" id = "submenu"&gt;Gallery&lt;/a&gt;
                      &lt;ul class="submenu" id = "drop"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Gallery1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Gallery2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Gallery3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Gallery4&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Gallery5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" id = "submenu"&gt;Site Map&lt;/a&gt;
                    &lt;ul class="submenu" id = "drop"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;SiteMap1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;SiteMap2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;SiteMap3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;SiteMap4&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;SiteMap5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/nav&gt;
              &lt;/div&gt;
      //-----------------Transition Script-------------------
              &lt;script&gt;
              $(document).ready( function(){
  
                  $('#submenu').click( function(event){
                      event.stopPropagation();
                      $('#drop').toggle();
                  });
  
                  $(document).click( function(){
                      $('#drop').hide();
                  });
  
              });
              &lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  
          //------------------css------------------
  
          body, html{
              width: 100%;
              margin: 0 auto;
              padding: 0px;
              }
          *{
              box-sizing: border-box;
              margin: 0px;
              padding: 0px;
              }
          #container{
              width: 100%;
              float: left;
              margin: 50px 0 0 50px;
              }
          nav ul{
              float: left;
              background-color: #ffa800;
              border-radius: 3px;
              position: relative;
              }
          nav ul.menu li{
              height: 35px;
              float: left;
              display: inline;
              list-style-type: none;
              line-height: 15px;
              padding: 10px 20px;
              position: relative;
              }
          nav ul.menu li a{
              text-decoration: none;
              font: bold 14px Arial, Helvetica, sans-serif;
              color: #fff;
              }
          nav ul.menu li:hover a{
              color: #c14a02;
              }
          nav ul.menu li ul.submenu{
              width: 100%;
              position: absolute;
              top: 35px;
              left: 0;
              display: none;
              background-color: #e5e4e4;
              border: none;
              text-align: center;
              margin: 0px;
              }
          nav ul.menu li:hover ul.submenu{
              display: block;
                  }
          nav ul.menu li ul.submenu  li{
              width: 100%;
              text-align: center;
              margin: 0;
              padding: 10px 5px 0 0;
              }
          nav ul.menu li ul.submenu li a{
              color: #464645;
              }
          nav ul.menu li ul.submenu li a:hover{
              color: #ffa800;
              }
          //-------------------------Transition Code---------------- 
          nav ul.menu  li{
              transition: all 0.2s;
              -webkit-transition: all 0.2s;
              -moz-transition: all 0.2s;
              }
          nav ul.menu  li  a{
              transition: all 0.5s;
              -webkit-transition: all 0.5s;
              -moz-transition: all 0.5s;
              }
          #drop {
              transition: all 1s;
              -moz-transition: all 1s; 
              -webkit-transition: all 1s;
              }
          #drop li {
              transition: height 0.5s;
              -moz-transition: height 0.5s; 
              -webkit-transition: height 0.5s; 
              }
  </code></pre>