After spending hours getting everything laid out and functioning perfectly, suddenly the menus started disappearing when trying to select an item from the drop down. No matter what I tried, like changing ul ul{display: block;}, the issue persisted. It used to work flawlessly, and now I'm clueless as to what went wrong. Can anyone offer some help?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TestSite®</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/octab.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<!--BEGIN HEADER-->
<body>
<div class="titlebar">
<div id="content" style="text-align:right">
Controls Technical Support: 866-918-1100
</div>
</div>
<div id="barcontent">
<img src="images/AAON_WattMasterLogo.png" alt="WattMaster Controls, Inc. ">
<nav>
<ul>
<li>
<a href="">First</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
</li>
<li>
<a href="">Second</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
</li>
<li>
--------------------------(truncated for brevity)--------------------------
CSS:
@import url(//fonts.googleapis.com/css?family=Volkhov:700,700italic,400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@font-face {
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
}
.err
{
font-family : Verdana, Helvetica, sans-serif;
font-size : 12px;
color: red;
}
body {
font-family: Arial,Helvetica,sans-serif;
background-color: #F6F6F6;
margin: 0 auto;
}
#content{
max-width: 1175px;
margin: 10px auto;
}
#barcontent{
max-width: 1175px;
margin: 10px auto;
}
#barcontent img{
width: 12%;
}
.titlebar{
background-color: #e6e6e6;
display: inline-block;
width: 100%;
}
/*NAVIGATION BAR CSS*/
nav{
display: flex;
/*background-color: white;*/
width: 85%;
float: right;
}
--------------------------(truncated for brevity)--------------------------