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

您将来难以维护的脏代码

尝试取出css中的样式

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从班级margin-top: 44px和其他子菜单

中删除submenu1

小提琴：https://jsfiddle.net/7mnu4Lcx/1/

下拉菜单关闭太快

2 个答案: