.nav 
{
  font-size: 1em;	/* set the font size */
}

.nav ul
{
	display: flex;					/* sets the display to flex */
	lex-direction: row; 			/* sets the flex direction to row  */
	justify-content: space-around;  /* set the horizantal content (as a row) to an even space  */
	flex-wrap: wrap; 				/* Stops the text wrapping */
	color: green; 					/* set the font color to green */
	border-radius: 10px; 			/* set the border radius to 10 px */
	background-color: #FFFFF0;		/* set the background color */
	border: 2px solid #FFCC00; 		/* set the border width to 2 px the style to a solid line and the color */
	list-style-type: none; 			/* This stops the browser showing any styles on the menu */
	font-weight: bold; 				/* set the font weight */
	/*padding: 5px;				/* set the padding of the text */
	 /*margin:2px;	*/					/* No spacing between menu-items  (spacing is provided via padding above) */

}

.nav a:link
  {
	color: green;				/* set the font color to green */
	text-decoration: none;		/* stops the browser underlining the text */
 }
 
 .nav a:visited 
 {
	color: green;				/* set the font color to green */
 }
 
/* Here we set the styles for the hover */

.nav a:hover {
	border-radius: 10px;				/* set the border radius to 10 px */
	border: 2px solid #FFCC00;			/* set the border width to 2 px the style to a solid line and the color */
	display: block;						/* set the display to  block which starts on a new line, and takes up the whole width*/
	text-align: left;					/* sets the text the left */
	background-color: #006600;			/* re-sets the background color */
	color: #FFFF00; 					/* re-set the text color */
	padding: 1px;
	
	
}

/* Here we address the styles of the sub-menu */

.nav ul li  ul
		{
	display: none;						/* set the display to none. That hides the sub menu */

	
}

/* Here we set the styles for when we hover over the sub-menu*/

nav ul li:hover ul
 {
	display: block;							/* set the display to  block which starts on a new line, and takes up the whole width*/
	border: 2px solid #FFCC00;				/* set the border width to 2 px the style to a solid line and the color */
	position: absolute;						/* set the position of this element to to exactly match the parent element the ul li */
	background-color: #FFFFF0;				/* re-sets the background color */
	text-align: left;					/* sets the text the left */
	}
	
.nav ul li  ul li
		{
		margin-left: -40px;
}

/* Here we set the the media querie so the menu will  appear nicely in screens up to 360px */

@media (max-width:510px)	/* In this quarie we change two classes.*/
							/* We need to make sure that the two classes we are changing are inside the {} brackets of the media quarie */
		
	{
		.nav ul							/* This is the class we need to change */

		{
		display: flex; /* sets the display to flex */;
		flex-direction: column;/* set the horizantal content (as a row) to an even space  */
		text-align: center; 

		}
		.nav a:hover {
		text-align: center; 
		/*padding:  10px ;				/* set the padding of the text */
		/*margin: 2px;*/
		}
		.nav ul li:hover ul				/* and this class we need to change */

		 {
		position: relative;				/* set the position of this element is positioned relative to its normal position */
		flex-direction: column;/* set the horizantal content (as a row) to an even space  */
		text-align: center; 



		}
	}	/* You must close the curly brackets to close the media quarie */