body {
  margin: 0;
  padding: 0;
 
}

.nav ul {
  list-style: none;
 /* background-color: #339933; #A00000*/
  text-align: center;
  padding: 0;
  width:auto;/*800px;*/
  margin-top: 0;
  
  margin-left:0;
  z-index:1;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height:30px;/* 30px;*/
  text-align: left;
  z-index:1;
}

.nav a {
  text-decoration: none;
  color:#fff; 
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
  z-index:1;
}

.nav a:hover {
  background-color: #4747FF;
  color:Yellow;
  z-index:1;
}

.nav a.active {
  background-color:#4747FF;
  color: #444;
  cursor: default;
  z-index:1;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
  z-index:1;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width:auto;
    border-bottom: none;
    height: 30px;
    line-height: 30px;
    font-size: 1.0em;
    display: inline-block;
    margin-right:5px;
    margin-left:5px;
    
  }

  .nav a {
    border-bottom: none;
    
  }

  .nav > ul > li {
    text-align: center;
    
    z-index:1;
  }
  .nav ul ul ul li
  {
	position:absolute ; left: 100%; top:0;z-index:1;
   }
  .nav > ul > li > a {
    padding-left: 0;z-index:1;
    
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    
    width: inherit;
    z-index:1;
  }

  .nav li:hover ul {
    display: block;
    z-index:1;
  }

  .nav li ul li {
    display: block;
	
    z-index:1;
  }
}