My current webpage setup is quite simple, featuring a drop-down menu that appears upon clicking a button. However, when the button is clicked, the drop-down menu suddenly shifts the entire contents of the page. I'm unsure of what's causing this issue and would greatly appreciate any assistance. Thank you in advance!
Please check out the live link:
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>ManaBadi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script src="./jquery_min.js"></script>
<script src="./button_dropdown_menu.js"></script>
<script src="./nav_hide_show.js"></script>
</head>
<body>
<div id="main_content_container">
<header>
<span>ManaBadi</span>
<img src="./menu100.png" id="hamburger_menu_icon" alt="menu icon">
<ul id="nav_ul">
<li><a href="#">Home</a></li>
...
"<li class="region_locations"><a href="#">Kingdom of Saudi Arabia</a></li>
</ul>
</li>
...
And here's my CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (pub.*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
...