How to stop a singe item from shifting left when hovering - css

Question

I am trying to create a reactive navbar with dropdown. To make things easier I have put my css in a style tag. I have tried everything I can think of to keep the "Our Story" under About from shifting left. Also to make this more of a challenge I am only allowing myself to use HTML and CSS.
thank you so much for the help.
body {
background-image: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
background-size: cover;
background-repeat: no-repeat;
font-size: 22px;
line-height: 32px;
color: #000;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'Bree Serif', 'serif';
}
#title {
color: #000;
text-shadow: none;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 1em;
background-color: #FFF;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 40px;
font-weight: 700;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
background-color: #34cc99;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #FFF;
}
/* Styling the links */
nav a {
display: inline-block;
padding: 14px 20px;
color: #fff;
font-size: 20px;
text-decoration: none;
white-space: nowrap;
text-align: center;
}
nav ul li ul li:hover,
nav ul li:hover {
background: #34cc99;
color: #FFF;
width: max-content;
padding: 0%;
text-align: center;
}
nav:hover {
border-bottom: #34cc99 5px solid;
}
/* Background color change on Hover */
nav a:hover {
background-color: #019966;
color: #ffffff;
text-shadow: 1px 1px lightgray;
width: auto;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
background-color: #019966;
color: #FFF;
text-align: center;
width: max-content;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: auto;
float: none;
display: list-item;
position: relative;
background-color: #34cc99;
color: #FFF;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li>a:after {
content: ' ';
}
li>a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle+a,
.menu {
display: none;
}
/* Styling the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked+ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
color: #FFF;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 12px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<nav>
<div id="logo">GETUWIRED</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">WordPress +</label>
ABOUT
<input type="checkbox" id="drop-1" />
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Web Design +</label>
LOCATIONS
<input type="checkbox" id="drop-2" />
<ul>
<li>AUSTIN, TX</li>
<li>ATLANTA, GA</li>
<li>SEATTLE, WA</li>
<li>PORTLAND, OR</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">WordPress +</label>
PRODUCTS
<input type="checkbox" id="drop-3" />
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALE
</ul>
</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 1

I tested here and this worked:
/* I modified that part */
nav ul li ul li:hover,
nav ul li:hover {
background: #34cc99;
color: #FFF;
padding: 0%;
text-align: center;
}
/* I added this part */
nav ul li ul li {
width: 100%;
}
/* I added this part */
nav ul li ul li:hover a {
max-width: 100%;
display: block;
}

Answer 2

Try this solution
Delete width: max-content; from :
nav ul li ul li:hover, nav ul li:hover {
background: #34cc99;
color: #FFF;
/* width: max-content; */
padding: 0%;
text-align: center;
}
Also, add display: block; to :
nav a:hover {
display: block;
background-color: #019966;
color: #ffffff;
text-shadow: 1px 1px lightgray;
width: auto;
}