Simple dropdown menu - html

Question

I'm trying to make a simple dropdown menu but the sub items of Meme don't stay in block.
If I remove float left of header li, the menu of Memes appears under Home.
HTML:
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}

Answer 1

Remove the float left and change the following:
header li {
position: relative;
display: inline;
padding: 0 20px 0 20px;
}
nav ul ul {
display:none;
position: absolute;
top: 100%;
left: 0;
}
demo

Answer 2

If you use a flexbox for the embedded menus, it handles with width of the sub-items better than floating does.
You can also change this flex to use flex-direction: row if you prefer that to the column.
Had to change a few other things in order to position the absolute element properly based on its parent menu element. But not too much has changed and I even included a following element to show how they will be aligned even with following submenus.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: flex;
align-items: start;
flex-direction: column;
background: #e8491d;
}
nav > ul{
height: 20px;
}
nav ul li{
position: relative;
white-space: nowrap;
}
nav ul ul {
display:none;
position: absolute;
right: 0;
top: 100%;
width: auto;
padding: 0;
}
nav ul ul li {
padding: 0 5px;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
<li>Memes2
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>

Answer 3

Remove the float:left off of header li and make it display:inline-block; instead.
Edit: I don't know how it doesn't work then, because it does in this fiddle, with the same code that you provided. There must be other code that you have that is conflicting, that you didn't include.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>