快速關閉下拉菜單

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>