Navigation Bar - Transparent Issue - css

Question

I don't understand why I am able to see through my navigation bar like this. I can even highlight the text through it. Any help guys?
Here's the HTML and CSS, when I test this on an online editor, it works properly. But on my local code, it doesn't.
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
}
nav ul{
list-style: none;
position: relative;
float: right;
margin-right: 100px;
display: inline-table;
}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li:hover{background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}
nav ul li{
float: left;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav ul li a{
display: block;
padding: 30px 20px;
color: #222;
font-size: .9em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>

Answer 1

I cant comment, so this appears as an answer but its more a suggestion as I cant see all your code (like where is the Lorem Ipsum coming from?)
You've set the nav to position:fixed, this removes itself from the structure of the DOM. I dont see a z-index property there so that might fix the situation. The text will be hidden behind the navigation if you set the z-index to anything greater than 0.
nav {
position:fixed;
z-index: 1;
...
}
To make sure the text sits underneath the navigation, you may want to set a margin-top to your body tag equating to the height of the navigation bar.