CSS dropdown menu borders and slight offset - html

Question

I need to make the following dropdown menu:
CSS dropdown menu SOLUTION.
My code just doesn't do the job right:
My (wrong) SOLUTION
My code at the moment:
.parent-menu li {
display: block;
text-transform: uppercase;
border-bottom:none;
border-top:none;
padding:10px;
border-right:none;
}
.sub-menu-caption, .upper-menu{
border:1px solid red;
}
.parent-menu{
width:100%;
}
.sub-menu {
font-style: italic;
display: none;
width:170px;
height:90px;
position:absolute;
background:black;
margin:10px 0 0 -11px;
font-size:1em;
}
.sub-menu li{
border-bottom:1px solid red;
z-index: 1;
}
.sub-menu li:last-child {
border-bottom: none;
}
.sub-menu-caption{
left:auto;
right:auto;
text-align:center;
}
.sub-menu-caption:hover .sub-menu {
display: block;
border:solid red 1px;
border-top:none;
padding-bottom:5%;
}
<nav id="main-menu" class="section">
<ul class="parent-menu">
<li class="sub-menu-caption">Automobiles
<ul class="sub-menu">
<li>812 Superfast</li>
<li>GTC4Lusso</li>
<li>488 GTB</li>
<li>488 Spider</li>
</ul>
</li>
<li class="upper-menu">services</li>
<li class="upper-menu">pre-owned</li>
<li class="upper-menu">Find a dealer</li>
<li class="upper-menu">my ferrari</li>
</ul>
</nav>
There is an slight offset to the right with the dropdown menu and borders aren't going all the way through :(
What could be the problem? And how could i fix it? And no, i don't work for Ferrari :D
Thank you!

Answer 1

Nevermind. Tweaked the CSS code a bit differently and found the right solution.
.parent-menu {
overflow: hidden;
background-color: black;
}
.parent-menu > li{
padding: 10px;
padding-left: 16px;
padding-right: 16px;
float: left;
color: rgba(255,255,255,0.7);
border-right: 1px solid rgba(255,0,0,0.5);
}
.parent-menu > :first-child {
color: red;
padding-left: 18px;
padding-right: 18px;
border-left: 1px solid rgba(255,0,0,0.5);
}
.sub-menu li{
display: none;
position: absolute;
z-index:1;
}
.sub-menu {
display:block;
color: blue;
float: left;
text-align:left;
}
.sub-menu-caption:hover .sub-menu{
display: block;
position: absolute;
top: 30px;
left: 0px;
}
.sub-menu-caption:hover .sub-menu li{
display: block;
position: static;
background-color: black;
width: 100%;
border: 1px solid rgba(255,0,0,0.5);
border-top: 0;
font-style: italic;
font-size: 1em;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 3px;
}
.sub-menu-caption:hover .sub-menu :last-child{
border-radius: 0px 0px 4px 4px;
}
.sub-menu-caption:hover .sub-menu :first-child{
padding-top: 12px;
}
.sub-menu-caption:hover .sub-menu li a:hover{
color: red;
}
#main-menu {
top: 0;
text-transform: uppercase;
position: sticky;
z-index:1;
margin-bottom: 30px;
}
article {
position: relative;
width: 90%;
margin: auto;
}
article.main-container > :first-child {
font-variant: small-caps;
}
.parent-menu a:link {
text-decoration: none;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
.parent-menu a:visited {
text-decoration: none;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
.parent-menu a:hover {
text-decoration: underline;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
.parent-menu a:active {
text-decoration: none;
font-weight: 400;
color: rgba(255,255,255,0.7);
}
li.right-menu.upper-menu {
background-color: rgba(255,0,0,0.5);
float: right;
background-clip: padding-box;
}