Dropdown-Menü zu schnell schließen

Question

Ich baue eine Website und ich bin mit einem Problem fest ... wenn ich über ein li-Element schweben und das Untermenü angezeigt wird, kann ich nichts darin klicken, weil es wirklich schließt schnell.

-Code hinzugefügt unten -

<div class="col-md-9"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Order</a> 
    <ul class="submenu1" style="margin-left: -35px"> 
     <li><center><a href="#" style="margin-left: -50px">Order Entry</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Shipment Details</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Accounts Department</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Machine Installation Group</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Commercial Group</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Order Enquiry</a><hr/></center></li> 
     <li><center><a href="#" style="margin-left: -50px">Order Status</a><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; 
} 

Ich weiß, dass es eine Lücke ist, aber ich bin nicht in der Lage, es zu entfernen. Bitte helfen. Vielen Dank im Voraus.

Answer 1

löschen margin-top: 44px von Klasse submenu1 und anderen Untermenüs

Fiddle: https://jsfiddle.net/7mnu4Lcx/1/

Answer 2

Sie schmutzig-Code, der nur schwer in die Zukunft

Versuchen Sie, halten Sie die Stile in der CSS zu nehmen

*{ 
 
    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><a href="#">Home</a></li> 
 
    <li><a href="#">Order</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#">Order Entry</a></li> 
 
     <li><a href="#">Shipment Details</a></li> 
 
     <li><a href="#">Accounts Department</a></li>  
 
     <li><a href="#">Machine Installation Group</a></li> 
 
     <li><a href="#">Commercial Group</a></li> 
 
     <li><a href="#">Order Enquiry</a></li> 
 
     <li><a href="#">Order Status</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>