title: Bootstrap dropdown menu on hover (With Creative-Tim Icon Navbar)
body: <p>This is not the same as just a normal Bootstrap navbar, it is the Creative Tim icon navbar for Bootstrap found at (<a href="http://www.creative-tim.com/live/navbar-with-icons" rel="nofollow">http://www.creative-tim.com/live/navbar-with-icons</a>) I'm having some trouble getting my dropdown navbar to open when hovered over. I tried using...</p>
  
  <pre><code>.dropdown:hover .dropdown-menu {
  display: block;
  }
  </code></pre>
  
  <p>but have had no joy. I suspect the creative tim navbar is getting in the way of something.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>  &lt;nav class="navscroll navbar navbar-light" style="background-color: #ecf1f0; color: #fff;" role="navigation"&gt;
      &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynav"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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&gt;
    &lt;div class="collapse navbar-collapse" id="mynav"&gt;
      &lt;ul class="nav navbar-nav" id="scroll"&gt;
          &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;i class="fa fa-home" aria-hidden="true"&gt;
              &lt;/i&gt;
              &lt;p&gt;Home&lt;/p&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#"&gt;
                &lt;i class="fa fa-users" aria-hidden="true"&gt;
                &lt;/i&gt;
                &lt;p&gt;About Us&lt;/p&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
  
          &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fa fa-cube" aria-hidden="true"&gt;
      &lt;/i&gt;&lt;p&gt;Products&lt;/p&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu multi-column columns-3"&gt;
  
        &lt;li class="col-sm-4"&gt;
          &lt;ul class="multi-column-dropdown" style="font-size:17px;"&gt;
            &lt;li&gt;&lt;a href="#process" style="font-weight: bold"&gt;Banner Systems&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#process"&gt;Roll Up&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#process"&gt;L/X Banner&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#process" style="font-weight: bold"&gt;Cases&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#process"&gt;Foam Cases&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  
          &lt;li class="col-sm-4"&gt;
            &lt;ul class="multi-column-dropdown" style="font-size:17px;"&gt;
              &lt;li&gt;&lt;a href="#process" style="font-weight: bold"&gt;Image Walls&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#process"&gt;Pop Up wall&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#process"&gt;Tube Wall&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#process"&gt;Alu Wall&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="col-sm-4"&gt;
            &lt;ul class="multi-column-dropdown" style="font-size:17px;"&gt;
              &lt;li&gt;&lt;a href="#process" style="font-weight: bold"&gt;Outdoor Systems&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#process"&gt;Outdoor / Flags&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#process"&gt;Wall Frames&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
  
  
      &lt;/ul&gt;
  &lt;/li&gt;
  
  
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;i class="fa fa-shopping-cart" aria-hidden="true"&gt;
              &lt;/i&gt;
              &lt;p&gt;Shop&lt;/p&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;i class="fa fa-download" aria-hidden="true"&gt;
              &lt;/i&gt;
              &lt;p&gt;Downloads&lt;/p&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;i class="fa fa-newspaper-o" aria-hidden="true"&gt;
              &lt;/i&gt;
              &lt;p&gt;News&lt;/p&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
            &lt;i class="fa fa-phone" aria-hidden="true"&gt;
            &lt;/i&gt;
            &lt;p&gt;Contact Us&lt;/p&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
  
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is my CSS for the Navbar dropdown menu</p>
  
  <pre><code>.navbar-nav &gt; li &gt; .dropdown-menu{
      display: block;
      padding: 0;
      z-index: 9000;
      position: absolute;
      -webkit-border-radius: 0px !important;
      box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
      border-radius: 0px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      opacity: 0;
      -ms-filter: "alpha(opacity=0)";
      -webkit-filter: alpha(opacity=0);
      -moz-filter: alpha(opacity=0);
      -ms-filter: alpha(opacity=0);
      -o-filter: alpha(opacity=0);
      filter: alpha(opacity=0);
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
      -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
      -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
      -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
      transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
  }
  
  .navbar-nav &gt; li.open &gt; .dropdown-menu{
      -webkit-transform-origin: 29px -50px;
      -moz-transform-origin: 29px -50px;
      -o-transform-origin: 29px -50px;
      -ms-transform-origin: 29px -50px;
      transform-origin: 29px -50px;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      -ms-filter: none;
      -webkit-filter: none;
      -moz-filter: none;
      -ms-filter: none;
      -o-filter: none;
      filter: none;
  }
  </code></pre>