List elements overlapping

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>

Solution

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;
}

Comments

[Gorige ashok kumar]

why you are using ul again inside of li.. Can please check the html tags ..may be it will help

[Cozzmy Cosmin]

if you look closer, it'a a dropdown menu, so it's a list in another list.

[Cozzmy Cosmin]

Well, yes it is, but the answer is already chosen. And you also didn't explain me what you did, so I learned nothin'.