My apologies.
Here's my code:
HTML
<html>
<head>
<title>My Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel ="stylesheet" href="CSS/1.css">
</head>
<body>
<button onclick="aboutb()" class="infoplus">About</button>
<div id="infodrop">
<ul>
<li><a href="">test</a> </li>
<li><a href="">test</a> </li>
<li><a href="">test</a> </li>
<li><a href="">test</a> </li>
<li><a href="">test</a> </li>
<li><a href="">test</a> </li>
</ul>
</div>
</body>
<script src="JS/1.js">
</script>
</html>
CSS
/*info */
#infodrop ul{width:50%; height:30%; background-color:blue; list-style-type:none; overflow:hidden; position:fixed; top:7%; left:0%; display:none; }
#infodrop li a{ background-color:black; width:100%; height:17%; color:white; display:block; }
.reveal{display:block; }
.infoplus{background:rgba(0,0,0,0.8); width:15.5vw; height:9vh; position:absolute; top:0px; left:150px; padding:0; border-radius:10px; color:white; z-index:3; }
Javascript
/*About button*/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function aboutb() {
document.getElementById("infodrop").classList.toggle("reveal");
}
// Close the dropdown menu if the user clicks outside of it
/* */ window.onclick = function(event) {
if (!event.target.matches('.infoplus')) {
var drinfo = document.getElementsByClassName("infoplus");
var i;
for (i = 0; i < drinfo.length; i++) {
var odinfo = drinfo[i];
if (odinfo.classList.contains('reveal')) {
odinfo.classList.remove('reveal');
}
}
}
}
