在我可以将鼠标悬停在子菜单上之前，下拉菜单会隐藏

Question

为什么我的下拉菜单隐藏得很快？我必须快速将鼠标悬停在子下拉菜单上，以使下拉菜单仍然显示。

我认为我的问题出在select上，但是我不知道如何实现。

这是我的代码：

body {
  font-family: Verdana, Geneva, sans-serif;
  padding: 0;
  margin: 0;
}

.ic {
  font-weight: bold;
  margin-right: 5px;
  font-size: .9rem;
}

.wrap {
  background-color: black;
}

#topbar {
  overflow: hidden;
  padding: 0;
  width: 1200px;
  height: 50px;
  margin: auto;
  text-transform: uppercase;
  font-size: .8rem;
}

.nospace {
  color: white;
}

li {
  margin: 15px;
}

li.left {
  float: left;
  list-style: none;
}

li.right {
  float: right;
  list-style: none;
}

li a {
  text-decoration: none;
  color: aqua;
}

#banner {
  background: url(bg1.jpg) no-repeat center;
  height: 600px;
  background-size: 1650px;
  opacity: 0.7;
  font-family: 'Forum', cursive;
  font-size: 20px;
}

ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

nav li {
  position: relative;
}

.menubar {
  width: 1200px;
  margin: auto;
  display: block;
}

.menubar a {
  padding: 10px;
  color: black;
}

.menubar a:hover {
  color: blue;
}

.drop-nav {
  position: relative;
}

.drop-nav:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 40%;
  right: 1%;
}

#content {
  padding: 0;
  display: none;
  height: 0px; 
  z-index: 1;
}

#content a {
  color: white;
  border-bottom: 1px solid black;
  background-color: rgba(0,0,0,0.5); 
  text-decoration: none;
  display: block;
  text-align: center;
}

#content a:hover {
  background-color: aqua;
}

li:hover ul#content {
  display: block;
  position: absolute;
  top: 25px;
  left: 0px;
  width: 120px;
  visibility: visible;
}

.wrap01 {
  height: 60px;
  border-bottom: 1px solid gray;
}

.isi{
  width: 1200px;
  margin: auto;
  text-align: center;
  padding: 20px;
}
.boxutama{
  width: 1200px;
  margin: auto;
  padding: 20px;
}
.boxkecil{
  display: inline-block;
  width: 360px;
  margin: auto;
  text-align: center;
  padding: 15px;
}
i{
  color: blue;
}
.boxkecil a{
 text-decoration: none;
}
.boxkedua{
  overflow: hidden;
  height: 180px;
  background-color: black;
  font-family: 'Forum', cursive; 
}
.isi2{
  color: white;
  width: 1200px;
  margin: auto;
  display: block;  
}
.spanleft{
  float: left;
  width: 50%;
  padding: 20px;
  padding-left: 100px;
  margin: auto;  
}
.spanright{
  float: right;
  padding: 20px;
  padding-right: 100px;
  margin: auto; 
  line-height: 138px;
}
.btn1{
  margin: auto;
  border: 1px solid blue;
  text-transform: uppercase;
  padding: 10px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
}
.boxketiga{
  overflow: hidden;
  width: 1200px;
  padding: 20px;
  margin: auto;
  margin-top: 20px;
}
.one_half_first{
  float: left;
  padding: 20px;
}
.one_half{
  padding: 20px;
  float: right;
  width: 49%;
  text-align: left;   
}
.gambarcontoh{
  width: 480px;
  height: 400px;
  padding: 20px;
  border: 1px solid #D7D7D7;
}
.tanggal{
  margin: 0px;
  padding: 0px;
  font-size: .8rem;
}
.heading{
  margin-top: 5px;
}
.boxkeempat{
  font-family: 'Forum', cursive;
  background-color: black;
  height: 220px;
}
.isi3{
  width: 1200px;
  margin: auto;
  display: block;
  text-align: center;
}
.atas {
  color: white;
  padding: 20px;
  padding-top: 20px;
}
.atas h3{
  font-weight: bold;
  font-size: 20px;
}
.bawah{
  padding-top: 20px;
}
.btn2{
  border: 1px solid white;
  text-transform: uppercase;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
}
.boxkelima{
}
.wraplima{
  width: 1500px;
  margin: auto;
  padding: 20px;
  margin-top: 10px;
  display: block;
  text-align: center;
  font-family: Georgia,"Times New Roman",Times,serif;
}
.isikotak{
  width: 250px;
  margin: auto;
  margin: 0 15px;
  display: inline-block;
  font-family: 'Forum', cursive;
  font-size: 13px;
}
.kotakfoto{
  margin-top: 20px;
  border: 1px solid #D7D7D7;
}
img.foto{
  padding: 15px;
  max-width: 220px;
  max-height: 320px;
  -webkit-filter: sepia(100%);
  filter: sepia(100%); 
}
.kotakkcl{
  padding: 5px;
  position: relative;
  display: block;
  left: 37%;
  width: 157px;
  margin: -55px;
  background-color: white;
  border: 1px solid #d7d7d7;

}
.kotakkcl h3, p{
  margin: auto;
}
.boxfooter{
  background: url(bg11.jpg);
}
.boxfooter a{
  text-decoration: none;
  color: white;
}
.ovlay{
  background-color: rgba(0,0,0,0.7);
}
.boxf1{
  width: 1200px;
  margin: auto;
}
.boxatas1{
  text-align: center;
  color: white;
  font-family: 'Forum', cursive;
  padding-top: 40px;
  margin-bottom: 60px;
}
.grup{
  width: 1200px;
  margin: auto;
  margin-top: 10px;
}
.dalam1{
  display: inline-block;
  text-align: center;
  margin: 10.3px
}
.icon{
  position: absolute;
  left: 295px;
  top: 2759px;
}
.icon i::before{
  padding: 20px;
  background: linear-gradient(to top right,#000,#666);
  border-radius: 50%;
  border:1px solid white;
}
.icon i{
  color: white;
  border-radius: 50%;
  padding: 20px;
}
.dalam{
  color: white;
  padding: 20px;
  padding-top: 40px;
  border: 1px solid white;
  width: 233px;
}
.footermenu{
	margin: auto;
	margin-top: 20px;
	background-color: rgba(0,0,0,.5);
}
.menufooter{
	width: 1200px;
	margin: auto;
	text-align: center;
	padding: 20px; 
}
.menufooter a{
	padding: 0 20px;
	text-decoration: none;
	border-left: 1px solid white;
	text-align: center;
	margin: 0, 5px;
}
.footerbawah{
	overflow: hidden;
	width: 1000px;
	margin: auto;
	padding: 20px;
	color: white;
}
p.left {
  float: left;
}

p.right {
  float: right;
}

<!DOCTYPE html>
<html>
<head>
  <title>New DPW</title>
  <link href="new1.css" rel="stylesheet" type="text/css" media="all">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Forum" rel="stylesheet">
</head>
<body>
  <div class="Halaman">
    <div class="wrap">
      <div id="topbar">
        <div class="nospace">
          <li class="left"><span class="ic">&#9743;</span> +00 (123) 456 7890</li>
          <li class="left"><span class="ic">&#9993;</span> info@pajak.go.id</li>
          <li class="right"><a href="#">Tentang</a></li>
          <li class="right"><a href="#">Kontak</a></li>
          <li class="right"><a href="#">Login</a></li>
          <li class="right"><a href="#">Register</a></li>
          <li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="wrap01">
        <nav class="menubar">
          <li class="left">Sistem Pemberkasan Gudang</li>
          <li class="right"><a href="#">Peraturan</a></li>
          <li class="right"><a href="#"></a></li>
          <li class="right"><a class="drop-nav" href="#">Pajak</a>
            <ul id="content">
              <a href="#">Pajak Bangunan</a>
              <a href="#">Pajak Penghasilan</a>
              <a href="#">Pajak Kendaraan</a>
              <a href="#">Pajak Perdagangan</a>
            </ul>
          </li>
          <li class="right"><a class="drop-nav" href="#">Halaman</a>
              <ul id="content">
              <a href="#">Artikel</a>
              <a href="#">zero 1</a>
            </ul>
          </li>
          <li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
        </nav>
      </div>
    </div>
  <div class="wrapmain">
    <main class="utama">
    <div class= "isi">
      <h3>Risus sed justo tinciduntt</h3>
      <p>Cras dapibus ipsum vel eleifend commodo eros tortor imperdiet elit eget molestie nisi lectus.</p>
    </div>
    <div class="boxutama">
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-cubes" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>  
      </div>
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-css3" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </div>
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-dashcube" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </div>
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-database" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </div>
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-desktop" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </div>
      <div class="boxkecil">
        <article><a href="#"><i class="fa fa-dropbox" style="font-size: 200%;"></i></a>
          <h6>Pellentesque libero</h6>
          <p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum&hellip;</p>
          <footer><a href="#">Read More &raquo;</a></footer>
        </article>
      </div>
    </div>
    </main>
  </div>
    <div class="boxkedua">
      <div class="isi2">
      <div class="spanleft">
        <H3>Pajak Negara Indonesia</H3>
        Pajak adalah pungutan wajib yang dibayar rakyat untuk negara dan akan digunakan untuk kepentingan pemerintah dan masyarakat umum</div>
      <div class="spanright">
        <a class="btn1" href="#">More Information &raquo;</a>
      </div>
      </div>
    </div>
    <div class="boxketiga">
      <div class="one_half_first"><img class="gambarcontoh" src="bg1.jpg" alt=""></div>
      <div class="one_half">
        <p class="tanggal">Tanggal, 22 Juli 2018</p>
        <h3 class="heading">Venenatis erat nunc lorem</h3>
        <p>Sed pharetra non sollicitudin nec libero curabitur dapibus ex non viverra scelerisque arcu nisl dignissim enim in lacinia dolor libero id urna duis sodales dignissim enim.</p>
        <blockquote>Interdum integer vestibulum venenatis justo id vulputate mi curabitur ac odio sed diam ullamcorper pulvinar proin tristique odio non suscipit venenatis magna enim convallis arcu vitae blandit turpis</blockquote>
        <p>Sed pharetra non sollicitudin nec libero curabitur dapibus ex non viverra scelerisque arcu nisl dignissim enim in lacinia dolor libero id urna duis sodales dignissim enim. asfasjkfjkahsjhfjhasj asklfkjaskljfkjaisdfiwe sdkjfkjsdkljiieghwe kjdkfjsidigiosg kasdjklfjkajdklgjioae lasjklfjliajew9fqe ioajsdijiljadg9 ladkjlkgj lkajs fl aksklklfjklajsfioaw asjksjafj asfkjasjfh uasfuiqwio. askljlasjlkfjkasf askljfkljalksjfqowjf eklsdlklisod pfawp fawoifpoiawpoif paw fpawf aw ofoaw f poawpo fpoawipfi iawo weokoriweirpoaiskfokasopifpwea okd po foasofkpoaifpow pojfowifpaw pof.</p>
        <footer><a href="#">Read More &raquo;</a></footer>
      </div>
    </div>
    <div class="boxkeempat">
      <div class="isi3">
      <div class="atas">
      <h3>Pajak Negara Indonesia</h3>
      <p>Pajak adalah pungutan wajib yang dibayar rakyat untuk negara dan akan digunakan untuk kepentingan pemerintah dan masyarakat umum.</p>
      </div>
      <div class="bawah">
      <a class="btn2" href="#">Sudahkah Anda Membayar Pajak..?</a>
      </div>
      </div>
    </div>
    <div class="boxkelima">
      <div class="wraplima">
        <h3>CREATOR OF THIS WEBSITE</h3>
        <p>Berikut adalah seluruh anggota yang membuat web sederhana ini</p>
        <div class="isikotak">
          <div class="kotakfoto">
            <img class="foto" src="maya.jpg" alt="">
          </div>
          <div class="kotakkcl">
            <p style="color: blue; font-size: 1.2em;">Staff</p>
            <h3>M Bima Sakti Admaja</h3>
            <p>150411100080</p>
          </div>
        </div>
        <div class="isikotak">
          <div class="kotakfoto">
            <img class="foto" src="maya.jpg" alt="">
          </div>
          <div class="kotakkcl">
            <p style="color: blue; font-size: 1.2em;">Staff</p>
            <h3>M Bima Sakti Admaja</h3>
            <p>150411100080</p>
          </div>
        </div>
        <div class="isikotak">
          <div class="kotakfoto">
            <img class="foto" src="maya.jpg" alt="">
          </div>
          <div class="kotakkcl">
            <p style="color: blue; font-size: 1.2em;">Staff</p>
            <h3>M Bima Sakti Admaja</h3>
            <p>150411100080</p>
          </div>
        </div>
        <div class="isikotak">
          <div class="kotakfoto">
            <img class="foto" src="maya.jpg" alt="">
          </div>
          <div class="kotakkcl">
            <p style="color: blue; font-size: 1.2em;">Staff</p>
            <h3>M Bima Sakti Admaja</h3>
            <p>150411100080</p>
          </div>
        </div>
      </div>
    </div>
    <div class="boxfooter">
    <div class="ovlay">
      <div class="boxf1">
        <div class="boxatas1">
          <h2 class="heading" style="margin-bottom: 10px; text-transform: capitalize;" >dui eu laoreet aenean non</h2>
          <p>dapibus lacus phasellus quis ligula ut libero venenatis scelerisque</p>
        </div>
        <div class="grup">
          <div class="dalam1">
            <div class="icon"><i class="fa fa-phone fa-lg"></i></div>
            <div class="dalam">
              <div>+62 (009) 340 9549</div>
              <div>1 (500) 200</div>
            </div>
          </div>
          <div class="dalam1">
            <div class="icon" style="left: 588px;"><i class="fa fa-envelope-o fa-lg"></i></div>
            <div class="dalam">
              <div>www.pajak.go.id</div>
              <div><a href="#">@DitjenPajakRI</a></div>
            </div>
          </div>
          <div class="dalam1">
            <div class="icon" style="left: 893px;"><i class="fa fa-clock-o fa-lg"></i></div>
            <div class="dalam">
              <div>Sen-Jum: 8.00 - 2.00</div>
              <div>Sabtu: 9.00 - 1.00</div>
            </div>
          </div>
          <div class="dalam1">
            <div class="icon" style="left: 1194px;"><i class="fa fa-support fa-lg"></i></div>
            <div class="dalam">
              <div>Online Support</div>
              <div><a href="support.pajak.go.id">Live Chat</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="footermenu">
         <div class="menufooter">
          <a href="#" style="border-left: none;"><i class="fa fa-home fa-lg" style="color: white"></i></a>
          <a href="#"> TENTANG</a>
          <a href="#"> KONTAK</a>
          <a href="#"> PERATURAN</a>
        </div>
      </div>
      <div class="footerbawah">
        <p class="left">Copyright &copy; 2018 - All Rights Reserved - <a href="#">Domain Name</a></p>
        <p class="right">Powered by :<a href="trunojoyo.ac.id">Trunojoyo.ac.id</a></p>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

Answer 1

子菜单关闭太快的原因是，主菜单按钮和子菜单之间的距离很小，因此鼠标可以检测到它从子菜单按钮中滑出并关闭。

只需增加主菜单按钮的大小即可，：）