드롭 다운 메뉴가 너무 빨리 닫힙니다.

Question

사이트를 구축 중입니다. 문제가 있습니다. li 요소 위로 마우스를 가져 가면 하위 메뉴가 표시되고 실제로 닫히기 때문에 아무 것도 클릭 할 수 없습니다. 빠른.

코드 아래에 추가 -

<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; 
} 

내가 거기에 간격입니다하지만 난 그것을 제거 할 수 아니에요 것을 알고있다. 도와주세요. 미리 감사드립니다.

Answer 1

클래스 submenu1 및 기타 하위 메뉴에서 margin-top: 44px 삭제

바이올린 : https://jsfiddle.net/7mnu4Lcx/1/

Answer 2

더러운 코드 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><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>