Drop-down menu closing too quickly - html

Question

I am building a site and I am stuck with a problem... when I hover over a li element and the submenu is displayed, I can't click anything inside it because it closes really fast.
Code added below -
<div class="col-md-9">
<ul>
<li>Home</li>
<li>Order
<ul class="submenu1" style="margin-left: -35px">
<li><center>Order Entry<hr/></center></li>
<li><center>Shipment Details<hr/></center></li>
<li><center>Accounts Department<hr/></center></li>
<li><center>Machine Installation Group<hr/></center></li>
<li><center>Commercial Group<hr/></center></li>
<li><center>Order Enquiry<hr/></center></li>
<li><center>Order Status<hr/></center></li>
</ul>
</li>
</ul>
</div>
.nav
{
height:100px;
background-color:darkslateblue;
}
.image
{
height:400px;
background-image: url('../images/image.png');
background-repeat: no-repeat;
background-size:cover;
}
.image h1
{
color:white;
margin-left:150px;
text-align: center;
font-size:25px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:150px;
}
.nav a
{
color:white;
font-family: 'Raleway', sans-serif;
font-weight:600;
font-size:12px;
text-transform:uppercase;
padding:20px;
}
.nav li
{
display:inline;
}
.nav .container
{
padding:30px;
}
.menu2
{
height:50px;
background-color: darkslateblue;
}
.info
{
height:400px;
background-color: white;
}
.info h1
{
color: darkslateblue;
text-align:center;
font-size:50px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:25px;
}
.info p
{
color: black;
font-family: 'Raleway', sans-serif;
margin: 50px;
font-size:20px;
font-weight:bold;
}
.footer
{
height:50px;
background-color:darkslateblue;
}
.footer p
{
color:white;
text-transform: uppercase;
padding:10px;
}
.setPass
{
margin-top:60px;
margin-left:500px;
}
.submenu1
{
width:200px;
height:450px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu1 ul
{
display:none;
position:absolute;
}
.submenu1 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu1
{
display:block;
position:absolute;
}
.submenu2
{
width:200px;
height:230px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu2 ul
{
display:none;
position:absolute;
}
.submenu2 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu2
{
display:block;
position:absolute;
}
.submenu3
{
width:200px;
height:300px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu3 ul
{
display:none;
position:absolute;
}
.submenu3 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu3
{
display:block;
position:absolute;
}
.submenu4
{
width:200px;
height:110px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu4 ul
{
display:none;
position:absolute;
}
.submenu4 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu4
{
display:block;
position:absolute;
}
I know that there is a gap but i'm not able to remove it.
Please help.
Thanks in advance.

Answer 1

You dirty code that is difficult to maintain in the future
Try to take out the styles in the css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* use reset.css or normalize.css */
}
ul{
list-style: none;
display: flex;
}
ul> li{
position: relative;
}
ul> li a{
display: block;
padding: 5px 10px;
}
.submenu{
display: none;
position: absolute; top: 100%; left: 0;
}
ul> li:hover .submenu{
display: block;
}
<ul>
<li>Home</li>
<li>Order
<ul class="submenu">
<li>Order Entry</li>
<li>Shipment Details</li>
<li>Accounts Department</li>
<li>Machine Installation Group</li>
<li>Commercial Group</li>
<li>Order Enquiry</li>
<li>Order Status</li>
</ul>
</li>
</ul>

Answer 2

Delete margin-top: 44px from class submenu1 and other submenus
Fiddle: https://jsfiddle.net/7mnu4Lcx/1/