Help needed with activating dropdown menu on hover.
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
...
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
</script>
</head>
<body>
...
Having trouble making the dropdown feature active by hovering over "Dashboards".
View full HTML code here
Access CSS snippets here
Any assistance in making the dropdown work would be appreciated. Thank you!