cant get my navbar color working correctly keeps a bar around my text

Question

Aslam Thanks for the help helped allot !

now just trying to figure out how to get the colors right. cause when i am on the top of the dropdown box it colors all links white instead of only the one standing on ,plus if my bar drops down there is this grey box around my tekst i dont want i want it black just like in the navbar itself.

Mani

.navbar {
  background-color: #000;
}

.navbar a {
  text-decoration: none;
  color: #54FF52;
}

.navbar ul {
  text-align: left;
  display: inline;
  margin: 0px;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.navbar ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background-color: #000;
}

.navbar ul li:hover {
  background: #333;
  color: #fff
}

.navbar ul li:hover a {
  background: #333;
  color: #fff
}

.navbar ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  visibility: hidden;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

.navbar ul li ul li {
  background: #000;
  display: block;
  color: #FFF;
  text-shadow: 0 -01px 0 #000;
}

.navbar li ul li:hover {
  background: #333;
}

.navbar ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
	background: #000
}

<div class="navbar">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="recepten.html">Recepten</a>
      <ul>
        <li><a href="lactosevrij.html">Lactosevrij</a></li>
        <li><a href="suikervrij.html">Suikervrij</a></li>
        <li><a href="glutenvrij.html">Glutenvrij</a></li>
      </ul>
    </li>
    <li><a href="abonneren.html">Abonneren</a>
      <ul>
        <li><a href="basis.html">Basis</a></li>
        <li><a href="standaard.html">Standaard</a></li>
        <li><a href="luxe.html">Luxe</a></li>
      </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Answer 1

The problem was in the combinators. When you write without the greater sign, it will set the style of all children, but with the greater sign it will set only the exact children of the elements

.navbar ul li:hover > a {
  background: #333;
  color: #fff
}

For more info read this MDN article