CSS下拉菜单破了

时间：2017-10-02 07:14:57

标签： html css dropdown

我有一个可下拉的下拉菜单，其中子链接应该向右打开。这段代码在几年内保持不变，而且它一直在运作。现在我添加了一个新的子链接，代码破了。

这是菜单代码：

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

所以我在那里添加了一个子链接，即使我将其删除，代码也无法正常工作。

enter image description here

屏幕上限：子链接始终显示 - 而不是悬停

2 个答案:

答案 0 :(得分：1)

您错过了<ul>之后的起始<div id="divMenu">代码。在<ul>之后添加<div id="divMenu">将为您解决此问题。

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

答案 1 :(得分：1)

你刚开始缺少开放元素ul。只需将您的HTML代码更改为：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题