$(document).ready(function () {
$("#subTopics").hide();
$("#mainTopics").click(function () {
$("#subTopics").show("slow");
});
});body
{
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
#subTopics {
position: absolute;
margin-top: 10px;
width: 100%;
left: 0;
}
#subTopics ul {
margin: 0;
padding: 0;
}
#subTopics li {
display: block;
}
#subTopics a {
text-align: left;
}
#column1, #column2, #column3, .columns {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
#main-menu li:hover {
text-decoration: underline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header>
</header>
<nav>
<div id="main-menu">
<ul>
<li><a href="">Logo</a></li>
<li><a href="">Home</a></li>
<li><a href="" id="mainTopics">Topics</a>
<div id="subTopics">
<div id="column1" class="columns">
<ul>
<li><a href="">example1</a></li>
<li><a href="">example2</a></li>
<li><a href="">example3</a></li>
<li><a href="">example4</a></li>
<li><a href="">example5</a></li>
<li><a href="">example6</a></li>
<li><a href="">example7</a></li>
<li><a href="">example8</a></li>
<li><a href="">example9</a></li>
<li><a href="">example10</a></li>
</ul>
</div>
<div id="column2" class="columns">
<ul>
<li><a href="">example11</a></li>
<li><a href="">example12</a></li>
<li><a href="">example13</a></li>
<li><a href="">example14</a></li>
<li><a href="">example15</a></li>
<li><a href="">example16</a></li>
<li><a href="">example17</a></li>
<li><a href="">example18</a></li>
<li><a href="">example19</a></li>
<li><a href="">example20</a></li>
</ul>
</div>
<div id="column3" class="columns">
<ul>
<li><a href="">example21</a></li>
<li><a href="">example22</a></li>
<li><a href="">example23</a></li>
</ul>
</div>
</div>
</li>
<li><a href="">Jobs</a></li>
<li><a href="">Markets</a></li>
</ul>
</div>
</nav>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>Hello, I am experiencing an issue where when I click on the element 'subtopics', it does not show up as intended. Additionally, upon refreshing the page, there seems to be a flickering effect where the subtopics appear and disappear quickly. Can any experienced web developer help me troubleshoot this problem? Thank you in advance for your assistance. (Apologies for any language barriers) ****My main goal is to have the 'subTopics' dropdown or show up upon clicking, rather than hovering over it.****