title: Change text color inside box on hover
body: <p>So right now self teaching myself so html and CSS and I have a slight problem. In my menu bar I have some list items that I want to change color when the mouse hovers over the box, but I'm unsure how to do that. Right now I have:</p>
  
  <pre><code>#Menu li:hover{
      background-color: rgba(255,165,0,0.5)
  }
  
  #Menu li a:hover{
      color: black;
  }
  </code></pre>
  
  <p>But this makes it where when I hover over the text it changes and only the box changes. I tried:</p>
  
  <pre><code>#Menu li:hover{
      background-color: rgba(255,165,0,0.5)
      color: black;
  }
  </code></pre>
  
  <p>but that does nothing except change the box color. Also having a gradual change instead of an abrupt change would be nice as well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Menu {
      height: 40px;
      background-color: rgb(255,165,0);
  
  }
  #Menu ul{
      margin:auto;
      padding:0;
  }
  
  #Menu li {
      list-style-type: none;
      float: left;
      display: block;
      width:20%;
      height:40px;
      text-align: center;
      line-height:40px;
      font-family: inherit;
      font-size:16px;
  }
  
  #Menu li a{
      text-decoration: none;
      color:white;
      position: fixed;
  
  }
  
  #Menu li:hover {
      background-color: #FFB733;
  
  }
  
  #Menu li a:hover {
      color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
        body {
          margin: 0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;div id="Menu"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cat&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Dog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mouse&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>edit: Added code snippet</p>