List elements overlapping - html

Question

I'm having troubles with my horizontal menu-bar list items overlapping.
So the ul ul li of the nav div elements overlap, what can I do to stop that?
The jsfiddle
CSS:
body, html{
padding: 0px;
margin: 0px;
}
.nav {
font-family: 'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li{
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover{
background: #0d47a1;
}
.nav ul ul{
overflow:visible;
position: absolute;
visibility: hidden;
top: 100%;
width: 0%;
}
.nav ul ul li{
border:none;
display:block;
position: absolute;
left:0;
margin:0px;
}
.nav ul li:hover>ul{
visibility: visible;
}
.nav a{
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child{
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a><ul><li><a>Here is the awesomeness</a></li>
<li><a>Awesome</a></li>
</ul>
</div>

Answer 1

fiddle Here are some modification in your code:
.nav ul ul li {
border: medium none;
display: block;
/*left: 0;*/
margin: 0;
/*position: absolute;*/
}
.nav ul ul {
overflow: visible;
position: absolute;
top: 100%;
visibility: hidden;
/*width: 0;*/
}
you can add below css not to wrap your text in 2 lines:
.nav ul ul {
white-space: nowrap;
}

Answer 2

Try like this Demo
CSS:
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}

Answer 3

body, html {
padding: 0px;
margin: 0px;
}
.nav {
font-family:'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0;
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li {
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover {
background: #0d47a1;
}
.nav ul li > ul {
position: relative;
display:none;
}
.nav ul ul li {
border:none;
display:block;
position: relative;
left:0;
margin:0px;
}
.nav ul li:hover>ul {
display:block;
}
.nav a {
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child {
border-bottom: 3px solid #0d47a1;
}
<div class="nav">
<ul>
<li><a>Hi there</a>
<ul>
<li><a>Here is the awesomeness</a>
</li>
<li><a>Awesome</a>
</li>
</ul>
</li>
</ul>
</div>