title: SCSS dropdown hover menu
body: <p>I'm working on a pure SCSS dropdown menu. The approach I'm trying is to show the child of the hovered parent on hovered. I'm using SASS. See my Markup below. I have commented above the important piece:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;nav class="main-navigation"&gt;
      &lt;ul&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
          &lt;li class="subitem"&gt;
            &lt;ul&gt;
              &lt;li&gt;subitem&lt;/li&gt;
              &lt;li&gt;subitem&lt;/li&gt;
              &lt;li&gt;subitem&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;PLot Overview&lt;/a&gt;&lt;/li&gt;
          &lt;li class="subitem"&gt;
            &lt;ul&gt;
              &lt;li&gt;subitem&lt;/li&gt;
              &lt;li&gt;subitem&lt;/li&gt;
              &lt;li&gt;subitem&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;subitem&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;subitem&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;subitem&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;subitem&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item"&gt;&lt;a href="#"&gt;subitem&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>.main-navigation {
    width: 100%;
    position: relative;
    ul {
      max-width: 1200px;
      margin: 0 auto;
      padding: 18px;
      .item {
        display: inline;
        padding-right: 43px;
        font-size: 13px;
        text-transform: uppercase;
        // this is where the subitem is supposed to show on hover
        &amp;:hover .subitem {
          display: block;
        }
      }
    }
  }
  
  .subitem {
     display: none;
  }
  </code></pre>
  
  <p>The block of code that I'm doing (or lt least trying) to utilize to show the child of each hover is this:</p>
  
  <pre><code>&amp;:hover .subitem {
     display: block;
  }
  </code></pre>
  
  <p>But I don't understand why it doesn't work. It compiles to this:</p>
  
  <pre><code>.main-navigation ul .item:hover .subitem {
     display: block;
  }
  </code></pre>
  
  <p>Which is essentially the same as <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text" rel="nofollow noreferrer">the W3Schools example</a> which is this:</p>
  
  <pre><code>.dropdown:hover .dropdown-content {
      display: block;
  }
  </code></pre>
  
  <p>Which in both w3 and my implementation, are children of the parent selector and how as far as I know show child elements on hover.</p>
  
  <p>Here is my jsfiddle for demonstration: <a href="https://jsfiddle.net/o2fbvqe0/1/" rel="nofollow noreferrer">https://jsfiddle.net/o2fbvqe0/1/</a></p>
  
  <p>As I understand it, i should be able to show a child element with <code>:hover</code> in CSS but it's not working in this example. Why is that?</p>