Classes in nav only work with inspecting element in firefox - html

Question

I want to code a navigation bar for my website. It should support a mobile and a desktop view. Now I want to add a div in nav and it doesn't work, but when I analyse it with inspecting element in firefox and refresh the site it works. Can anyone help me?
Here is a code-snippet of the nav:
/* Here is the css declaration of the drop class: */
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>

Answer 1

Actually there is a "nav" but it got no height.
I did a Fiddle where I added some height and a background color, also removing margin to the body, check this out!
https://jsfiddle.net/tu9rh3sg/
This for the HTML (I've just closed the nav):
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>
</nav>
And this for the CSS (height + background-color+margin);
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
.nav {
background-color: black;
height: 50px;
}
body {
margin: 0 auto;
margin-top: -14px;
}
Tell me if it help ! ☻