Recently, I encountered an issue with a hoverable drop-down menu that has been functioning smoothly for years. After adding a new sub link, the code broke.
Here is the code for the menu:
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}<div id="divMenu">
<li><a href="index.php">Etusivu</a></li>
<li><a href="kissala.php">Kissala</a></li>
<li><a href="mainecoon.php">Maine Coon</a></li>
<li><a href="#">Herrat</a>
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li><a href="leo.php">Vuorensinen Baloo</a></li>
</ul>
</li>
<li><a href="#">Ladyt</a>
<ul>
<li><a href="sura.php">Blackcurrant Sophia Loren</a></li>
<li><a href="hilde.php">Bloomingtree QQ`Sweetest Taboo</a></li>
</ul>
</li>
<li><a href="#">Kastraatit</a>
<ul>
<li><a href="luna.php">Artsycats Lucy In The Sky</a></li>
</ul>
</li>
<li><a href="#">Pennut</a>
<ul>
<li><a href="varattavissa.php">Varattavissa</a></li>
<li><a href="suunnitelmat.php">Suunnitelmat</a></li>
<li><a href="pentuinfo.php">Pentuinfo</a></li>
</ul>
</li>
<li><a href="#">Pentueet</a>
<ul>
<li><a href="vintagestar.php">Vintage Star -pentue</a></li>
<li><a href="oldwest.php">Old West -pentue</a></li>
</ul>
</li>
<li><a href="linkit.php">Linkit</a></li>
<li><a href="yhteystiedot.php">Yhteystiedot</a></li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>Upon adding a new sub-link, the code malfunctioned. Even after removing it, the issue persisted.
https://i.sstatic.net/MCLOg.jpg
Screenshot: all sub-links are displayed at all times - they do not hide when hovering