CSS Selector To Make Bootstrap Dropdown Menu Appear On Hover

Question

I'm creating a menu using Bootstrap on Drupal, but I'm having trouble getting the dropdown to work on hover. What's supposed to happen is when you hover over a main menu item, a dropdown menu will appear below it. The dropdown menu is functioning, as well as the main menu, but the dropdowns currently appear on screen at all times. I want to do this using CSS, but can't seem to find the right selector to make it visible/hidden when hovering on and off.

My HTML and CSS for this project are attached below. Thanks!

<div class="region region-header">
  <div id="block-menu-block-2" class="block block-menu-block main-navigation">

    <div class="content">
      <div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
         <ul class="menu"><li class="first expanded menu-mlid-650"><a href="">Main Menu Item 1</a><ul class="menu"><li class="first last leaf menu-mlid-687"><a href="">Dropdown Item 1</a></li>
        </ul></li>
        <li class="expanded menu-mlid-651 dropdown "><a href="">Main Menu Item 2</a><ul class="menu"><li class="first last leaf menu-mlid-668"><a href="">Dropdown Item 2</a></li>
        </ul></li>
        <li class="expanded menu-mlid-653 dropdown"><a href="">Main Menu Item 3</a><ul class="menu"><li class="first leaf has-children menu-mlid-656"><a href="">Dropdown Item 3</a></li>
        </ul></li>
        <li class="last expanded menu-mlid-655 dropdown"><a href="">Main Menu Item 4</a><ul class="menu"><li class="first last leaf menu-mlid-664"><a href="">Dropdown Item 4</a></li>
        </ul></li>
    </ul></div>
   </div>
  </div>

  <div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav">
    <div class="content">
      <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
        <ul class="menu"><li class="first collapsed menu-mlid-650"><a href="">Main Menu Item 1</a></li>
        <li class="collapsed menu-mlid-651 dropdown "><a href="">Main Menu Item 2</a></li>
        <li class="collapsed menu-mlid-653 dropdown"><a href="">Main Menu Item 3</a></li>
      </ul></div>
    </div>
  </div>
 </div>

CSS:

    .dropdown-menu {
      display: block;
      border-radius: 0px;
      display: block;
      left: 0;
      top: 100%;
      float: left;
     list-style: none;
     background-clip: padding-box;
     position: static;
     width: 100%;
   }

  .mobile-nav ul.menu li ul.menu {
    @extend .dropdown-menu;

  .main-nav ul.menu li ul.menu {
   @extend .dropdown-menu;
  }


  @media only screen and (min-width: 1000px;) {
   .dropdown-menu {
     width: auto;
     display: block;
     position: absolute;
     width: auto;
     padding-left: 10px;
     padding-right: 10px;
   }
 }

Answer 1

The menu class is the parent for all menus to it should be

            .menu ul {
            display:none;
            }

Answer 2

$(document).ready(function() {

  $(".menu li a").hover(function() {
    $(this).next().show();
  }).mouseout(function() {
    $(this).next().hide();
  });

});

				.menu ul {
				  display: none;
				}
				

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region region-header">
  <div id="block-menu-block-2" class="block block-menu-block main-nav top-nav contextual-links-region">

    <div class="content">
      <div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
        <ul class="menu">
          <li class="first expanded active-trail menu-mlid-650"><a href="" class="active-trail">Main Menu Item 1</a>
            <ul class="menu">
              <li class="first last leaf active-trail active menu-mlid-687"><a href="" class="active-trail active">Main Menu Item 2</a>
              </li>
            </ul>
          </li>
          <li class="expanded menu-mlid-651 dropdown "><a href="">Main Menu Item 3</a> 
            <ul class="menu">
              <li class="first last leaf menu-mlid-668"><a href="">Item 3 Dropdown Item</a>
              </li>
            </ul>
          </li>
          <li class="leaf menu-mlid-652"><a href="">Main Menu Item 4</a>
          </li>
          <li class="leaf menu-mlid-654"><a href="">Main Menu Item 5</a>
          </li>
          <li class="expanded menu-mlid-653 dropdown"><a href="">Main Menu Item 6</a> 
            <ul class="menu">
              <li class="first leaf has-children menu-mlid-656"><a href="">Item 6 Dropdown Page</a>
              </li>
              <li class="last leaf menu-mlid-659"><a href="">Item 6 Dropdown Page 2</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav contextual-links-region">

    <div class="content">
      <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-    0 menu-level-1">
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 3

Here is a simple :hover based dropdown menu, using just CSS - no scripting needed:

ul {
margin: 0;
padding: 0;
}

li {
position: relative;
display: block;
width: 120px;
height: 24px;
line-height: 24px;
padding: 6px;
list-style-type: none;
background-color: rgb(127, 127, 127);
cursor: pointer;
}

li ul {
position: absolute;
display: none;
}

li:hover {
background-color: rgb(163, 163, 163);
}

li:hover ul {
position: relative;
display: block;
top: -12px;
left: 114px;
z-index: 6;
}

li li {
background-color: rgb(191, 191, 191);
}

<ul>
<li>Menu Item 1
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>

<li>Menu Item 2
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>

<li>Menu Item 3
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>
</ul>