title: Changing the background of a sub-menu
body: <p>I am working on a website page and I would like to change the sub menu's back ground color to match the main menus. Currently my code looks like this.</p>
  
  <pre><code>&lt;style&gt;
  div.main-content{
              width:160px;
              height:500px;
              margin:20px 10px;
              background-color:#000000;
              border:1px solid black;
              opacity:.6;
          }
          div.menu-header{
              margin:0px 0px;
              font-family:"sans-serif", Gadget, sans-serif;
              font-size:20px; 
              color:#ffffff; 
              padding: 10px;
          }
  
          a {
              color: inherit;
              text-decoration: inherit;
          }
  
          ul {
              list-style-type: none;
          }
  
          nav ul ul {
              display: none;
          }
  
              nav ul li:hover &gt; ul {
              display:block;
              position:relative; left: 160px;
              }
  
          .menu-header ul{
              margin: 0;
              padding: 0;
              width: 185px;
              list-style-type: none
          }
  
          div.sub-menu {
             width:160px;
              height:500px;
              margin:20px 10px;
              background-color:#000000;
              border:1px solid black;
              opacity:.6;
          }
  
  &lt;/style&gt;
  
  &lt;nav id="access" role="navigation"&gt;
  &lt;div class="menu-header"&gt;
      &lt;ul id="menu-main-menu" class="menu"&gt;
          &lt;li&gt;
              About
              &lt;ul&gt;
                  &lt;div class="sub-menu"&gt;
                  &lt;li&gt;Link 1&lt;/li&gt;
                  &lt;li&gt;Link 2&lt;/li&gt;
                  &lt;li&gt;Link 3&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              Contact
              &lt;ul&gt;
                  &lt;div class="sub-menu"&gt;
                  &lt;li&gt;Link&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I googled and tried some of the solutions but it didn't change anything. I even tried to make another class to address the sub menu (as I did above in the code) and it's not working. Can someone please explain to me what's wrong and how I can fix this? Thank you so much in advance!</p>