Riikin Riikin - 3 years ago 276
CSS Question

CSS drop down menu broke

I have a hoverable drop down menu where sub links are supposed to be open to the right. This code has remained the same for couple of years now and it's been working. Now I added a new sub link and the code broke.

This is menu's code:



#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>





So I've added one more sub-link there and even if I remove it, the code won't work.

enter image description here

Screen cap: the sub links are shown all the time - not with hovering

Answer Source

You have missed the starting <ul> tag after <div id="divMenu"> . Adding <ul> after <div id="divMenu"> shall fix it for you.

#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">
<ul>
  <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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download