Question

当我将鼠标悬停在子菜单上时，无法单击“博客”部分。

简而言之，菜单会在到达字幕之前自动关闭。

HTML：

<ul id="menu">
  <li>
    <a id="mobile"><img src="list.png" width="40" height="40" /></a>
    <a href="index" id="ustmenulogo"><img src="images/tuvlogo.png" width="100" height="20" /></a>
    <ul>
      <li>
        <a href="#">Seçenekler</a>
        <ul>
          <li>
            <a href="#">İçerikler</a>
            <ul>
              <li><a href="uniliste">Üniversiteler</a></li>
              <li><a href="bolumliste">Bölümler</a></li>
              <li><a href="strategy">Strateji Meslek Testi</a></li>
            </ul>
            <li>
              <a href="karsilastirmalar">Karşılaştırmalar</a>
              <ul>
                <li><a href="universite-karsilastirma">Üniversiteler Arası Karşılaştırma</a></li>
                <li><a href="bolum-karsilastirma">Bölümler Arası Karşılaştırma</a></li>
                <li><a href="unibolumkarsilastirma">Üniversitelerin Bölümlerinin Karşılaştırılması</a></li>
              </ul>
              <li>
                <a href="#">YKS</a>
                <ul>
                  <li><a href="ykskonular">Konular</a></li>
                  <li><a href="ykspuan">Puan Hesaplama</a></li>
                  <li><a href="yks-taban-puanlar">Taban Puanlar</a></li>
                  <li><a href="ykscikmissoru">Çıkmış Sorular</a></li>
                </ul>
                <li>
                  <a href="#">DGS</a>
                  <ul>
                    <li><a href="dgskonu">Konular</a></li>
                    <li><a href="dgspuan">Taban Puan</a></li>
                    <li><a href="dgscikmissoru">Çıkmış Sorular</a></li>
                  </ul>
                  <li><a href="motivasyontavsiye">Motivasyon Tavsiye</a></li>
        </ul>
        </li>
        <li><a href="kayit">Kayıt</a></li>
        <li><a href="iletisim">İLETİŞİM</a></li>
        <li><a href="blog">Blog</a></li>
    </ul>
    </li>
</ul>

CSS：

 #menu {
      position: fixed;
      top: 0px;
      display:block;
      visibility: visible;
      height: auto;
      width: 100%;
      margin: 0%;
      list-style: none;
      background: linear-gradient(#1a0000, #800000);
  }
  #menu li ul{
      display:none;
  }
      #menu a {
          text-transform: uppercase;
      }
  #menu li:hover > ul{
      display:block;
      position:relative;
  }

演示：jsfiddle

Answer 1

不是因为您使用的是1280x1024吗？我删除了该属性，并且所有菜单均已首先打开。尝试使用引导程序下拉列表，例如https://www.datacamp.com/community/tutorials/apache-spark-python。

下拉菜单自动关闭

1 个答案: