To correct the font, make this adjustment in the CSS:
#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
...
#emergencycontact a:link, #emergencycontact a:visited
{
display: block;
font-family: Tahoma;
...
Change it to this:
#menu a:link, #menu a:visited
{
display: block;
font-family: 'Roboto', Tahoma;
...
#emergencycontact a:link, #emergencycontact a:visited
{
display: block;
font-family: 'Roboto', Tahoma;
...
For styling the contact menu using CSS (no JavaScript needed):
HTML
<aside>
<ul id="emergencycontact">
<li>
<input type="checkbox" id="contact"/>
<label for="contact" name="contact">Contact</label>
<ul>
<h3 class="heading">Emergency Contacts</h3>
<h4>Assistance Phones</h4>
...
CSS
#emergencycontact li:hover,
#emergencycontact input:checked + label {
background-color: #ffd98a;
border: 1px solid #000;
}
#emergencycontact li:hover ul,
#emergencycontact input:checked ~ ul {
display: block;
}
#emergencycontact input {
display: none;
}
#emergencycontact label {
display: block;
padding: 5px; /* or whatever */
}
To keep the navigation menu open:
HTML
<ul id="menu">
<li><a href="#">About</a></li>
<li>
<input type="checkbox" id="events-and-workshops"/>
<label for="events-and-workshops">Events and Workshops</label>
<ul>
<li><a href="#">Upcoming Events</a></li>
...
CSS
#menu a:link,
#menu a:visited,
#menu label {
display: block;
font-family: 'Roboto', Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover,
#menu input:checked + label {
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul,
#menu input:checked ~ ul {
display: block;
}
#menu input {
display: none;
}