title: My CSS is not working properly when trying to display a div element when a p element is hovered
body: <p>I have a dropdown navigation system on my website, and it works fine, but I noticed that when I hovered below the dropdown text it would display the dropdown anyway. (<a href="https://jsfiddle.net/tx4suer9/" rel="nofollow noreferrer">jsfiddle of before</a>) I wanted to change that, so I tried changing <code>#dropdown:hover #dropdown-content</code> to <code>#dropdown p:hover #dropdown-content</code>. But I am not getting any results. </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>#nav-container {
    display: table;
    margin: 0 auto;
  }
  
  #navigation {
    height: 100px;
    padding: 10px 3px 3px;
    background-color: #D3D3D3;
    position: sticky;
  }
  
  #nav-items {
    list-style-type: none;
    margin-left: -45px;
  }
  
  #nav-items li {
    display: inline-block;
    vertical-align: top;
    width: 400px;
  }
  
  #group1 {
      display: inline-block;
  }
  
  #dropdown {
    display: inline-block;
    position: relative;
    text-align: center;
  }
  
  #dropdown p { 
    font-family: 'Work Sans', sans-serif; 
    font-size: 35px;
    letter-spacing: 5px;
    margin: auto auto auto auto;
  }
  
  #dropdown-content {
    position: absolute;
    margin: 10px auto auto auto;
    left: 0;
    right: 0;
    opacity: 0;
    height: auto;
    background-color: #575757; 
    border-radius: 8px;
    box-shadow: 0px 0px 6px 0px #D3D3D3;
    z-index: 1;
    overflow-y: hidden;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }
  
  #dropdown-content img {
    margin-bottom: 5px;
    user-drag: none; 
      user-select: none;
      -moz-user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  .nav-dropdown-container {width: 400px;}
  
  #dropdown-content p {
    font-size: 20px;
    font-family: 'Work Sans', sans-serif; 
    font-size: 30px;
    letter-spacing: 2px;
  }
  
  #dropdown p:hover #dropdown-content {  /* CHANGES HERE */
    opacity: 1;
    max-height: 500px;
    padding-top: 1em;
      padding-bottom: 1em;
    -webkit-transition: max-height 0.5s ease-in-out;
      -moz-transition: max-height 0.5s ease-in-out;
      -o-transition: max-height 0.5s ease-in-out;
      transition: max-height 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="navigation"&gt;
    &lt;div id="nav-container"&gt;
      &lt;center&gt;
        &lt;ul id="nav-items"&gt;
          &lt;li&gt;
            &lt;div id="group1"&gt;
              &lt;div class="nav-dropdown-container"&gt;
                &lt;div id="dropdown"&gt;
                  &lt;p&gt;Test&lt;/p&gt;
                  &lt;div id="dropdown-content"&gt;
                    &lt;p&gt;Test&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/center&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried everything, from putting the <code>p</code> element in it's own div to putting the <code>p</code> element in the <code>ul</code> element. Any help would be appreciated. </p>