Vertical submenu dropdown menu with Css/html - html

Question

I have a vertical Nav menu in html and I'm trying to make a submeu, but it's not going well. When I go to click the submeu it disappears. Any help would be appreciated
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>

Answer 1

You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent.
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
margin-left: 200px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>