title: Can't change current cursor
body: <p>I am doing a dropdown box, when my mouse hovers over a button it drops the box down and if the box hovers it will display the block but the problem is that I can't seem to change the cursor when the mouse is hovering over the dropdown box. It stays on pointer even though I want to have it on default.</p>
  <p>Thank you.</p>
  <p>css code:</p>
  <pre><code>.applesauce{
    text-align: right;
    margin-right: -0%;
    height: -10%;
    margin-top: -70%;
  }
  .applesauce button{
    text-align: right;
    margin-right: -18%;
    font-size: 200%;
    margin-top: 47%;
    font-style: italic;
    font-family: inherit;
    border: none;
    background-color: #3498DB00;
    color: #0d0d0d;
  }
  .applesauceDropdown button{
    text-align: right;
    margin-right: 8%;
    font-size: 110%;
    margin-top: 0%;
    font-style: italic;
    font-family: inherit;
    border: none;
    background-color: #3498DB00;
    color: #0d0d0d;
  }
  .applesauceDropdown{
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
    right: 23%;
  }
  .applesauce a{
    color: black;
    font-size: 110%;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .applesauce button:hover + .applesauceDropdown{
    cursor: default;
    display: block;
  }
  .applesauce button:hover{
    color: #666666;
  }
  .applesauceDropdown:hover{
    cursor: default;
    display: block;
  }
  .applesauceDropdown button:hover{
    color: #666666;
    cursor: pointer;
  }
  </code></pre>
  <p>html code:</p>
  <pre><code>    &lt;div class=&quot;applesauce&quot;&gt;
      &lt;button&gt;Applesauce&lt;/button&gt;
      &lt;div class=&quot;applesauceDropdown&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;applesauce&lt;/a&gt;
        &lt;button id=&quot;readMore&quot;&gt;read more ...&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The applesauceDropdown:hover is the problem</p>