.menu {
 	float:right;
	background:rgba(0,0,0,0.3);
	margin-top:0px;
	height:60px;
	border-bottom-left-radius: 50px;
}

.menu a {
  font-family: 'Oxygen', Arial, Helvetica, sans-serif;
  text-decoration: none;
  transition: .5s;
}

.menu li:first-child a { color: #FF9933; }
.menu li:nth-child(2) a { color: #66FF66; }
.menu li:nth-child(3) a { color: #FF6699; }
.menu li:nth-child(4) a { color: #66CCFF; }


.menu:hover li a { color: black; }
.menu li a:hover { color: white; }

.menu li:first-child:hover ~ .bg {
  background:#F86707 url('back3.png') repeat;
;
}

.menu li:nth-child(2):hover ~ .bg {
  background:#0a9f0a url('back3.png') repeat;
;
}

.menu li:nth-child(3):hover ~ .bg {
  background: magenta url('back3.png') repeat;
;
}

.menu li:nth-child(4):hover ~ .bg {
  background: #2259FF url('back3.png') repeat;
;
}

.menu li:nth-child(5):hover ~ .bg {
  background: blue;
}

.menu li:nth-child(6):hover ~ .bg {
  background: red;
}

ul {
	font-family: 'Oxygen', Arial, Helvetica, sans-serif;
	font-size:150%;
  	text-align: left;
  	list-style: none;
  	display: inline;
  	padding-left:20px;
  	color:white;
  	font-weight:bold;
}

ul li {
  display: inline-block;
  margin-right: 0px;
  position: relative;
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
  cursor: pointer;
  color:white;
  transition: 0.2s;
}

/* WHAT HAPPENS WHEN YOU HOVER OVER MAIN NAV BAR ITEMS */
ul li:hover {
  color: #fff;
}


ul li ul {
  padding: 0;
  position: absolute;
  left: 0px;
  width:auto;
  white-space:nowrap;
  display: none;
  visibility: hidden;
  font-size:70%;
}

ul li ul li { 
  background:rgba(255,255,255,0.3);
  height:35px;
  display: block;
  color: #fff;
  padding-top:0px;
  margin-top:10px;
  padding-top:10px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

ul li ul li:hover { 
  background:rgba(255,255,255,0.5);
}


ul li:hover ul {
  display: block;
  visibility: visible;
  }