Drop Down Menu when hovered over opens multiple selections unintended - html

Question

I created a code for a drop down menu but when ever I hover over the drop down menu it will open all and not just the one hovered.
Heres my html:
<div class='menuTitle'>
Medical
<div class='menuContent'>
Test<br />
Test2<br />
Test<br />
</div>
</div>
<div class='menuTitle'>|</div>
<div class='menuTitle'>
Bro
<div class="menuContent">
test<br />
comone<br />
</div>
</div>
and my CSS:
.menuTitle {
display: inline-block;
}
.menuContent {
position: absolute;
width: 100px;
background-color: gray;
display: none;
text-align:center;
}

Answer 1

Are your links test, test2 and test? If so you have to put them in seperate divs, better still use ul and li for navigation. You can also use a generator for this http://cssmenumaker.com/

Answer 2

Try:
<div class="dropDown">
<ul>
<li>Test</li>
<li>Test-Dropdown
<ul>
<li>Drop down content</li>
<li>Drop down content</li>
<li>Drop down content</li>
</ul>
</li>
<li>Test</li>
</ul>
</div>
CSS: To active the dropdown do something like this.
.dropDown > ul > li:hover > ul {
display: block;
}
.dropDown > ul > li > ul {
display: none;
position: relative;
bottom: 0;
left: 0;
}
add anymore styles you would like it to have
My fiddle to help you get started

Answer 3

Here is a drop down menu, no javascript needed.
css
menu, menu ul.drop-menu {
padding:0;
margin: 0;}
menu li, menu ul.drop-menu li {
list-style-type: none;
display: inline-block;}
menu li a, menu li ul.drop-menu li a {
text-decoration: none;
color: #fff;
background-color:#000 ;
padding: 5px;
display:inline-block;}
menu li {
position: relative;}
/*drop menu*/
menu li ul.drop-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;}
menu li:hover ul.drop-menu {
display:block;}
html
<ul id="menu">
<li>
Menu 1
<ul class="drop-menu">
<li>
Drop Menu 1
</li>
<li>
Drop Menu 2
</li>
<li>
Drop Menu 3
</li>
<li>
Drop Menu 4
</li>
</ul>
</li>
</li>
<li>Menu 2
<ul class="drop-menu">
<li>
Drop Menu 1
</li>
<li>
Drop Menu 2
</li>
<li>
Drop Menu 3
</li>
<li>
Drop Menu 4
</li>
</ul>
</li>
<li>
Menu 3
</li>
</ul>