Dropdown hides before I can hover on the sub menu - css

Question

Why does my dropdown hide really fast? I must hover quickly to my sub dropdown to make the dropdown still display.
I think my problem was on the select but I don't know how to implement it.
Here is my code:
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">☏</span> +00 [phone]</li>
<li class="left"><span class="ic">✉</span> info#pajak.go.id</li>
<li class="right">Tentang</li>
<li class="right">Kontak</li>
<li class="right">Login</li>
<li class="right">Register</li>
<li class="right"><i class="fa fa-home"></i></li>
</div>
</div>
</div>
<div id="banner">
<div class="wrap01">
<nav class="menubar">
<li class="left">Sistem Pemberkasan Gudang</li>
<li class="right">Peraturan</li>
<li class="right"></li>
<li class="right"><a class="drop-nav" href="#">Pajak</a>
<ul id="content">
Pajak Bangunan
Pajak Penghasilan
Pajak Kendaraan
Pajak Perdagangan
</ul>
</li>
<li class="right"><a class="drop-nav" href="#">Halaman</a>
<ul id="content">
Artikel
zero 1
</ul>
</li>
<li class="right">Rumah</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><i class="fa fa-cubes" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</footer>
</article>
</div>
<div class="boxkecil">
<article><i class="fa fa-css3" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</footer>
</article>
</div>
<div class="boxkecil">
<article><i class="fa fa-dashcube" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</footer>
</article>
</div>
<div class="boxkecil">
<article><i class="fa fa-database" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</footer>
</article>
</div>
<div class="boxkecil">
<article><i class="fa fa-desktop" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</footer>
</article>
</div>
<div class="boxkecil">
<article><i class="fa fa-dropbox" style="font-size: 200%;"></i>
<h6>Pellentesque libero</h6>
<p>A molestie dictum nullam vitae augue nulla phasellus et eleifend mi etiam odio dictum…</p>
<footer>Read More »</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 »</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>Read More »</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>[phone]</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>#DitjenPajakRI</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>Live Chat</div>
</div>
</div>
</div>
</div>
<div class="footermenu">
<div class="menufooter">
<i class="fa fa-home fa-lg" style="color: white"></i>
TENTANG
KONTAK
PERATURAN
</div>
</div>
<div class="footerbawah">
<p class="left">Copyright © 2018 - All Rights Reserved - Domain Name</p>
<p class="right">Powered by :Trunojoyo.ac.id</p>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

The reason why the sub menu closes too quickly is that you have a small gap between the main menu button and the sub menu so the mouse detects its rolled out of the sub menu button and closes.
just increase the size of the main menu buttons and that should do it :)