Div not displaying correctly as submenu of a nav - html

Question

Now the nav doesn't display as it should in this example when in full screen but it show correctly when in iPad mode on chrome, so for my purposes this will work.
I have totally made a submenu that pops out from the top nav before but for what ever reason this one has me stumped.
first I thought well duh! You need to change hoverableMenu{position:absolute};
and hoverable{position:relative};
and viola I would be done. However no matter what I do it either goes all the way to the left when I have float:left; and even if I wanted to I could hardcode the position using margin, but thats not an elegant solution and I know that in all honesty it is merely something that is flying over my head.
any and all help is appreciated.
Below is my minimum verifiable example.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<div id="seperator"></div>
<div id="content">
<nav>
<div class="topnav" id="myTopnav">
Home
Teaching
<a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Overview
Publications
</div>
<a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Awards
Gallery
</div>
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
JSFiddle
resources I accessed:
https://jsfiddle.net/davidpauljunior/pdcAF/1/
How to make sub menu float over div?
Can't click on menu links in drop down menu
EDIT
Under my media query I change the following.
div.hoverable{
display: relative;
}
div.hoverableMenu{
float:right;
display: absolute;
}
div.hoverable:focus > div.hoverableMenu{
top:1em;
left: 140px;
z-index: 99;
}
after doing this the menus are now popping up relative to their parents but they are causing the elements to the right of them to wrap around to under the rest of the nave items. Instead of the sub menu floating over the nav. :(

Answer 1

You have to change your structure a bit to ul li, checkout the code below
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 0;
padding: 0;
top: 40px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>

Answer 2

Change Some CSS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 100%;
padding: 0;
top: 0px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
.topnav > li > ul {
left: 0%;
padding: 0;
top: 40px;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>