Menu déroulant lorsque survolé survient ouvre plusieurs sélections involontaires - html, css, menu déroulant

J'ai créé un code pour un menu déroulant, mais chaque fois que je survole le menu déroulant, il ouvre tout et pas seulement celui qui est survolé.

Heres mon 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>

et mon CSS:

.menuTitle {
display: inline-block;
}

.menuContent {
position: absolute;
width: 100px;
background-color: gray;
display: none;
text-align:center;

}

Réponses:

0 pour la réponse № 1

Vos liens sont-ils test, test2 et test? Si c'est le cas, vous devez les placer dans des divs séparés, il vaut mieux utiliser ul et li pour la navigation. Vous pouvez également utiliser un générateur pour cela http://cssmenumaker.com/

---

0 pour la réponse № 2

Essayer:

<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: Pour activer le menu déroulant, procédez comme ceci.

.dropDown > ul > li:hover > ul {
display: block;
}
.dropDown > ul > li > ul {
display: none;
position: relative;
bottom: 0;
left: 0;
}

ajoutez plus de styles que vous voudriez avoir

Mon violon pour vous aider à démarrer

---

0 pour la réponse № 3

Voici un menu déroulant, aucun javascript nécessaire.

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>
<a href="#">Menu 1</a>
<ul class="drop-menu">
<li>
<a href="#">Drop Menu 1</a>
</li>
<li>
<a href="#">Drop Menu 2</a>
</li>
<li>
<a href="#">Drop Menu 3</a>
</li>
<li>
<a href="#">Drop Menu 4</a>
</li>
</ul>
</li>
</li>
<li><a href="#">Menu 2</a>
<ul class="drop-menu">
<li>
<a href="#">Drop Menu 1</a>
</li>
<li>
<a href="#">Drop Menu 2</a>
</li>
<li>
<a href="#">Drop Menu 3</a>
</li>
<li>
<a href="#">Drop Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
</li>
</ul>

---