Changing Position of Dropdown Menu - html

Question

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 ul inside the "Resources" li, 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?
Here is my HTML and CSS:
* {
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;
}
<nav>
<p> The Novel Column </p>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>

Answer 1

Add
nav ul li ul {
left: 50%;
right: auto;
transform: translateX(-50%);
}
left: 50% positions the left edge of the dropdown in the center of its parent. Then translateX(-50%) moves it to the left by half of the dropdown's width. Lastly right: auto ensures that the dropdown's width doesn't get messed up.
Demo:
https://jsfiddle.net/7Lzb8u6t/

Answer 2

Add translateX() CSS property to move your box, you can play with transform value and match your exact location,
for more information 1 rem = 16px;
* {
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;
transform: translateX(3rem);
}
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;
}
<nav>
<p> The Novel Column </p>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>