title: Add a transition to the submenu
body: <p>Help me to add a transition to the submenu. Although I have tried using transition but it didn't work. I want the transition to happen when the mouse hovers over.</p>
  
  <p>Any help will be much appreciated.</p>
  
  <p>Here's the code:</p>
  
  <p>CSS part:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.neighborhood-guides {
   top: -20px;
   position: relative;
      background-color: #efefef;
      border-bottom: 1px solid #dbdbdb;
  }
  
  .neighborhood-guides h2 {
      color: #393c3d;
      font-size: 24px;
  }
  
  .neighborhood-guides p {
      margin-bottom: 13px;
      font-size: 15px;
  }
  
  .thumbnail:hover {
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  }
  /*.nav {
   height: 160px;
  
  }
  
  .nav  img{
   position: absolute;
   height: 150px;
   display: block;
   left: 50%;
   margin-left: -50px;
  }*/
  
  .nav a {
   text-decoration: none;
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .nav li:hover {
   background: gray;
  }
  
  .nav li {
    display: inline;
  }
  
  a.dropdown-toggle:hover + ul.dropdown-menu, ul.dropdown-menu:hover {
  display: block;
  } 
  
  .dropdown-menu { margin-top: 0; } 
  
  .carousel {
   display: cover;
  }
  
  .carousel-inner {
   top: -20px;
   
  }
  
  .learn-more {
   top: -20px;
   position: relative;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dbdbdb;
  }
  
  .learn-more h3 {
    font-family: 'Shift', sans-serif;
    font-size: 18px;
    font-weight: bold;
  }
  
  .learn-more a {
    color: #00b0ff;
  }
  
  footer , .row {
    font-size: 12px;
    padding: 10px 0;
  }
  
  footer img:hover {
   background: orange;
   cursor: pointer;
  }
  
  @media only screen and (min-width: 150px) {
   .carousel-caption {
   top: 20%;
   transform: translateY(-50%);
   position: absolute;
   text-align: left;
  }
   .carousel-caption h1 {
    color: #fff;
    font-size: 14px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
  }
  
  .carousel-caption p {
    font-size: 12px;
    color: #fff;
  }
  
  .carousel-caption a {
    font-size: 12px;
    color: orange;
  }
  }
  
  @media only screen and (min-width: 310px) {
   .carousel-caption {
   top: 30%;
   transform: translateY(-50%);
   position: absolute;
   text-align: left;
  }
   .carousel-caption h1 {
    color: #fff;
    font-size: 18px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
  }
  
  .carousel-caption p {
    font-size: 14px;
    color: #fff;
  }
  
  .carousel-caption a {
    font-size: 14px;
    color: orange;
  }
  }
  @media only screen and (min-width: 768px) {
   .carousel-caption {
   top: 50%;
   transform: translateY(-50%);
   position: absolute;
   text-align: left;
  }
   .carousel-caption h1 {
    color: #fff;
    font-size: 48px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
  }
  
  .carousel-caption p {
    font-size: 20px;
    color: #fff;
  }
  
  .carousel-caption a {
    font-size: 20px;
    color: orange;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;     
    &lt;head&gt;
      &lt;link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"&gt;
   
      &lt;link rel="stylesheet" href="main.css"&gt;    
      
    &lt;/head&gt;
  
    &lt;body&gt;
   &lt;div class="navbar navbar-default navbar-static-top"&gt;
   &lt;div class="container"&gt;
    &lt;a href = "#" class="navbar-brand"&gt;Easy Trip&lt;/a&gt;
    &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    
    &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
          
    &lt;ul class="nav navbar-nav navbar-left"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;all&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
     &lt;li&gt;&lt;a href="#"&gt;Asia&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Africa&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Europe&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;America&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
          &lt;/ul&gt;
     
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
    
    &lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt;
      
   &lt;div id="myCarousel" class="carousel slide"&gt;
     &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
     &lt;/ol&gt;
     &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
       &lt;img src="http://hdwall.us/wallpaper_1920x1080/sun_cherry_blossoms_trees_flowers_desktop_1920x1080_hd-wallpaper-1194807.jpg" class="img-responsive"&gt;
       &lt;div class="carousel-caption"&gt;
       &lt;h1&gt;Find a place to stay.&lt;/h1&gt;
       &lt;p&gt;Rent from people in over 34,000 cities and 192 countries.&lt;/p&gt;
       &lt;a href="#"&gt;Learn More&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
       &lt;img src="http://xinature.com/wp-content/uploads/2016/10/forests-view-trees-sunlight-landscape-nature-sun-tree-sunrasy-sunrise-splendor-lovely-sunset-beautiful-woods-forest-magic-peaceful-rays-beauty-sky-hd-backgrounds-1920x1080.jpg" class="img-responsive"&gt;
       &lt;div class="carousel-caption"&gt;
       &lt;h1&gt;Find a place to stay.&lt;/h1&gt;
       &lt;p&gt;Rent from people in over 34,000 cities and 192 countries.&lt;/p&gt;
       &lt;a href="#"&gt;Learn More&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
       &lt;img src="https://wallpaperscraft.com/image/belgium_winter_garden_sun_sky_clearly_trees_60892_1920x1080.jpg" class="img-responsive"&gt;
       &lt;div class="carousel-caption"&gt;
       &lt;h1&gt;Find a place to stay.&lt;/h1&gt;
       &lt;p&gt;Rent from people in over 34,000 cities and 192 countries.&lt;/p&gt;
       &lt;a href="#"&gt;Learn More&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
       &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
        &lt;span class="icon-prev"&gt;&lt;/span&gt;
       &lt;/a&gt;
       &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
        &lt;span class="icon-next"&gt;&lt;/span&gt;
       &lt;/a&gt;
     &lt;/div&gt;
    &lt;/div&gt;    
      
      &lt;div class="neighborhood-guides"&gt;
          &lt;div class="container"&gt;
              &lt;h2&gt;Neighborhood Guides&lt;/h2&gt;
              &lt;p&gt;Not sure where to stay? We've created neighborhood guides for cities all around the world.&lt;/p&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Paris-HD-Wallpapers.jpg"&gt;
                      &lt;/div&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/World-Beautiful-places-Desktop-HD-Wallpapers.jpg"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="http://www.wallpapers-web.com/data/out/28/3948828-beautiful-places-wallpapers.jpg"&gt;
                      &lt;/div&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="https://s-media-cache-ak0.pinimg.com/originals/50/d5/22/50d52265980da137e18d3f85a5d9290e.jpg"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="http://swiss7.com/wp-content/uploads/2015/07/Top-20-safest-countries-in-the-world-for-solo-travelers.jpg"&gt;
                      &lt;/div&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;img src="http://www.hd-wallpaper1.com/images/abandoned-place.jpeg"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="learn-more"&gt;
     &lt;div class="container"&gt;
    &lt;div class="row"&gt;
         &lt;div class="col-md-4"&gt;
     &lt;h3&gt;Travel&lt;/h3&gt;
     &lt;p&gt;From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.&lt;/p&gt;
     &lt;p&gt;&lt;a href="#"&gt;See how to travel on Airbnb&lt;/a&gt;&lt;/p&gt;
         &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
     &lt;h3&gt;Host&lt;/h3&gt;
     &lt;p&gt;Renting out your unused space could pay your bills or fund your next vacation.&lt;/p&gt;
     &lt;p&gt;&lt;a href="#"&gt;Learn more about hosting&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
     &lt;h3&gt;Trust and Safety&lt;/h3&gt;
     &lt;p&gt;From Verified ID to our worldwide customer support team, we've got your back.&lt;/p&gt;
     &lt;p&gt;&lt;a href="#"&gt;Learn about trust at Airbnb&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
   &lt;footer class="container"&gt;
      &lt;div class="row"&gt;
        &lt;p class="pull-left"&gt;
          &amp;copy; 2017 Shoppiz
        &lt;/p&gt;
        &lt;ul class="col-sm-8 pull-right" style="list-style: none; display: flex; justify-content: flex-end"&gt;
          &lt;li class="col-sm-1"&gt;&lt;img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg" style="height:28px; width:28px"&gt;&lt;/li&gt;
          &lt;li class="col-sm-1"&gt;&lt;img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg" style="height:28px; width:28px"&gt;&lt;/li&gt;
          &lt;li class="col-sm-1"&gt;&lt;img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg" style="height:28px; width:28px"&gt;&lt;/li&gt;
          &lt;li class="col-sm-1"&gt;&lt;img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg" style="height:28px; width:28px"&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/footer&gt;
   
    &lt;/body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;$("#myCarousel").carousel({interval:5000});&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>