title: My dropdown navigation bar is not working
body: <p>I'm trying to make a dropdown menu where it will display images once you hover over the menu item called Tournaments, but it doesn't seem to be working.</p>
  <p>I suspect there might be something wrong with these <code>CSS</code> instructions:</p>
  <pre><code>.menu ul li .submen
  .menu ul li: hover .submen
  </code></pre>
  <p>but I'm not able to identify the error.</p>
  <p>Here is the nav <code>CSS</code> and <code>HTML</code>:</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>.menu_wrap{
    width: 100%;
  }
  
  .menu{
    width: 100%;
    height: 100px;
  }
  
  .menuimg a img{
    height: 100px;
    width: auto;
  }
  
  .menu ul{
    width: 100%;
    height: 100%;
    background: #282933;
    text-align: center;
    line-height: 50px;
    position: relative;
  }
  
  .menu ul li{
    display: inline-block;
    margin: 0 15px;
    padding: 0 10px 0 10px;
  }
  
  .menu ul li a{
    text-decoration: none;
    color: #d43a5b;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 2px;
    display: block;
  }
  
  .menu ul li .submen{
    position: absolute;
    background-color: #c2c2c2;
    width: 80%;
    right: 10%;
    padding: 25px 15px;
    display: flex;
    justify-content: space-around;
    line-height: 20px;
    visibility: hidden;
  }
  
  .menu ul li: hover{
    background: #169cc3; 
  }
  
  .menu ul li: hover .submen{
    visibility: visible; 
  }
  
  .submen .col img{
    width: auto;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/layers.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style1.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/tacks1.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="menu_wrap"&gt;
      &lt;div class="menu"&gt;
        &lt;div class="menuimg"&gt;
          &lt;a href="index.php"&gt;&lt;img src="Images/dragon.png"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;nav class="navv"&gt;
          &lt;div  class="navup"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="Login.php"&gt;Log In&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="signup.php"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="navdown"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="tickets.php"&gt;Tickets&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="tournaments.php"&gt;Tournaments&lt;/a&gt;&lt;/li&gt;
                &lt;div class="submen"&gt;
                  &lt;div class="col"&gt;
                    &lt;img src="images/dragon2.png"&gt;
                    &lt;h5&gt;Tournament&lt;/h5&gt;
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                    &lt;img src="images/dragon2.png"&gt;
                    &lt;h5&gt;Tournament&lt;/h5&gt;
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                    &lt;img src="images/dragon2.png"&gt;
                    &lt;h5&gt;Tournament&lt;/h5&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;li&gt; &lt;a href="#"&gt;Players&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Meritorder.php"&gt;Meritorder&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="sponsers.php"&gt;Sponsers&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.php"&gt;About SAKDC&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;  
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;!-- All content____________________________________________________________________--&gt;
    &lt;div class="bodystuff"&gt;</code></pre>
  </div>
  </div>
  </p>