我正在构建一个网站而且我遇到了一个问题......当我将鼠标悬停在一个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;
}
我知道存在差距,但我无法将其删除。 请帮忙。 提前谢谢。
答案 0 :(得分:1)
您将来难以维护的脏代码
尝试取出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;
}
&#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;
答案 1 :(得分:0)