title: Changing Position of Dropdown Menu
body: <p>I have a dropdown menu in my website which I want to be exactly in line with the "Resources" tab (which opens up the dropdown menu when I hover over it). I have tried adding margins to the <code>ul</code> inside the "Resources" <code>li</code>, but it isn't changing the styling the way I want it to. Am I entering the CSS in the wrong selector or even using the wrong properties?</p>
  
  <p>Here is my HTML and CSS:</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>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    background-color: orange;
  }
  
  nav {
    width: 100%;
    height: 60px;
    background-color: black;
    display: flex;
  }
  
  nav p {
    text-align: center;
    font-family: arial;
    color: white;
    font-size: 24px;
    line-height: 55px;
    float: left;
    padding: 0px 20px;
    flex: 1 0 auto;
  }
  
  nav ul {
   position: absolute;
   right: 0;
  }
  
  nav ul li {
    float: left;
    list-style: none;
    position: relative; /* we can add absolute position in subcategories */
    padding-right: 1em;
  }
  
  nav ul li a {
    display: block;
    font-family: arial;
    color: white;
    font-size: 14px;
    padding: 22px 14px;
    text-decoration: none;
  }
  
  
  nav ul li ul {
    display: none;
    position: absolute;
    background-color: black;
    padding: 5px; /* Spacing so that hover color does not take up entire chunk */
    border-radius: 0px 0px 4px 4px;
  }
  
  nav ul li:hover ul {
    /* This means when li is hovered, we want the unordered list inside list item to do something. */
    display: block;
  }
  
  
  nav ul li ul li{
     width: 130px; /* increases width so that all text can be fit */
    border-radius: 4px;
  }
  
  nav ul li ul li a:hover {
    background-color: #ADD8E6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;p&gt; The Novel Column &lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt; &lt;a href="#"&gt; Resources &lt;/a&gt;
        &lt;ul&gt; 
          &lt;li&gt; &lt;a href="#"&gt; Book Reviews &lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; Quotes and Principles &lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; Community Aid &lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; About Us &lt;/a&gt; &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>