HTML5 & CSS3 Dropdown Menu & Google Fonts only working in Chrome - css

Question

I'm pretty new to HTML5 and CSS3 and I've been developing a new website for my NGO. I'm pretty much done all the design, but I can't get my drop down menu to work in IE, and I can't get the Google Font I'm using to work in IE or Firefox.
I have a drop down menu with the org logo in the middle and the menu text floating at the vertical center of the logo on either side. In Chrome this works just as I want it to, but when I open it in IE11 the menu text is floating at the very top of the page, and the drop down boxes don't line up correctly. All of it lines up correctly in Firefox, but the Google Font 'Lato' that I'm using only works in Chrome.
Here is the HTML for the header:
/* Header */
* {margin: 0;padding: 0 ;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block; }
html {font-size: 60%;height: auto; !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-o-box-sizing: border-box;-moz-box-sizing: border-box; }
.clear {display: block; }
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}
/*GENERIC STYLES*/
body {background: url('../images/bg-tile-grey-2.png') font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;min-height: 100%;}
/*NAV*/
#logo {
display: inline;
margin: 0 auto;
padding: 0;
}
.menu {
position: relative;
}
#search {
float: left;
position: absolute;
}
#searchbox {
padding: 16px 15px 16px 15px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
margin-left: 0;
color: #603a16;
position: relative;
right: -5px;
border: none;
border-color: white;
}
#go {
padding: 8px;
font-size: 1.5rem;
font-family: 'Lato', Helvetica, Arial, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bolder;
color: transparent;
background: url('../images/magnifying-glass.png') top right no-repeat;
border: #74b648;
margin-right: 0;
}
.facebook {
height: 32px;
width: 32px;
background: url('../images/facebook_colour_32-03.png') top right no-repeat;
text-indent: -9999px;
margin: 0 15px 0 10px;
display: inline-block;
float: right;
box-shadow: none;
border: none;
}
.twitter {
height: 32px;
width: 32px;
background: url('../images/twitter_colour_32-03.png') top right no-repeat;
text-indent: -9999px;
display:inline-block;
float: right;
}
.donate {
position: relative;
right:-695px;
}
header {
display: block;
width: 100%;
text-align: center;
}
header > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
header > nav > ul > li {
flex: 0 1 auto;
margin: auto;
padding: 0;
position: relative;
transition: all linear 0.1s;
}
header > nav > ul > li:hover {
background-color: white;
}
header > nav > ul > li a + div {
background: white;
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1.1rem;
color: #603a16;
padding: .25rem 1.5rem;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: left;
position: absolute;
width: 220px;
}
header > nav > ul > li:hover a + div {
display: block;
}
header > nav > ul > li a + div > ul {
list-style-type: none;
}
header > nav > ul > li a + div > ul > li {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
font-family: 'Lato', Helvetica, sans-serif;
font-weight: bolder;
line-height: 2rem;
}
header > nav > ul > li a + div > ul > li > a {
color: #603a16;
display: block;
font-size: 1.1rem;
letter-spacing: 1.5px;
padding: .25rem 1.5rem;
text-decoration: none;
text-transform: uppercase;
width: 200px;
background: white;
}
header > nav > ul > li a + div > ul > li:hover > a {
background-color: #bbbbbb;
}
header > nav > ul > li > a {
color: #603a16;
display: block;
font-size: 1.7rem;
max-width: 500px;
padding: .9rem ;
text-decoration: none;
font-weight: ;
text-transform: uppercase;
transition: all linear 0.1s;
text-align: center;
margin-right: auto;
margin-left: auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: bolder;
}
header > nav > ul > li > a > div > span {
color: rgba(255,255,255,.75);
display: block;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-size: .7rem;
font-style: italic;
line-height: 1rem;
max-width: 260px;
}
<header class="main">
<nav role="navigation">
<ul style="position:relative; z-index:90;">
<li class="menu">
<a href="/about/index.html">
<div>
About
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Member Groups</li>
<li>Board of Directors</li>
<li>Bulletin</li>
<li>Brochure</li>
<li>Join</li>
<li>Contact</li>
</ul>
</div>
</li>
<li>
<li class="menu">
<a href="/events/index.html">
<div>
Events
</div>
</a>
<div>
<ul style="position:relative; z-index:99;">
<li>SEN World Rivers Day</li>
<li>SEN Environmental Film Festival</li>
<li>SEN Earth Overshoot</li>
<li>SEN Environmental Activist Awards</li>
<li>Events Calendar</li>
</ul>
</div>
</li>
<li>
<li class="menu">
<a href="/tools/index.html">
<div>
Tools
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Group Tools</li>
<li>Campaign Tools</li>
<li>Laws</li>
<li>Government Contacts</li>
<li>SEN's Grassroots Activism Fund</li>
</ul>
</div>
</li>
<li class="menu">
<a href="/solutions/energy/index.html">
<div>
Solutions
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Energy Policy</li>
<li>Energy Conservation and Efficiency</li>
<li>Alternate Energy Resources</li>
</ul>
</div>
</li>
<li class="menu">
<a href="/index.html">
<div id="top-logo">
<img src="images/EcoNet_logo_head2.png" height="180" width="180" title="Saskatchewan_Eco_Network" alt="Saskatchewan Eco Network">
</div>
</a>
</li>
<li class="menu">
<a href="/issues/index.html">
<div>
Issues
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Biodiversity</li>
<li>Biotechnology</li>
<li>Climate Change</li>
<li>Ethanol</li>
<li>Forests</li>
<li>Great Sand Hills</li>
<li>Intensive Livestock Operations</li>
<li>Mining</li>
<li>Pesticides</li>
<li>Water</li>
</ul>
</div>
</li>
<li>
<li>
<li class="menu">
<a href="/action/index.html">
<div>
Action
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Find your Representitive</li>
<li>Write a Letter to the Editor</li>
</ul>
</div>
</li>
<li>
<li>
<li class="menu">
<a href="/ecoed/index.html">
<div>
Eco-Education
</div>
</a><div>
<ul style="position:relative; z-index:99;">
<li>Teacher Resources</li>
<li>Eco-Education Stories</li>
<li>Indigenous Educators</li>
<li>Student Resources</li>
</ul>
</div>
</li>
<li>
</ul>
</nav>
</header>
and here is the CSS for the Header
The menu is in the correct position in Firefox, but the Google Font 'Lato' still isn't working correctly. Does anybody know what I'm doing wrong with my HTML and CSS that the menu and font are only working properly in Chrome?