问题描述
大家好,我遇到了一个小问题,将菜单项悬停在导航栏中时,子项出现但很快消失。用户无法选择所需的选项。我真正想要的是在用户悬停时按住它(子菜单)项。
以下是我的应用程序的 HTML 和 CSS 代码:
HTML 代码
<template>
<div class="navigation">
<v-toolbar extended extension-height="10" color="blue">
<v-row>
<v-col cols="6" class="nav-el hidden-md-and-down" >
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#">Laptops</a></li> <hr>
<li><a href="#">Monitors</a></li> <hr>
<li><a href="#">Printers</a></li> <hr>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</v-col>
</v-row>
</v-toolbar>
</div>
</template>
CSS 代码
.navigation{
position: relative;
z-index: 30;
}
.navigation .nav-el{
margin-top: 20px;
text-align: center;
}
.navigation .navbar li{
text-decoration: none;
display: inline-block;
padding-left: 10px;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
position: relative;
}
.navigation .navbar a{
text-decoration: none;
color : white;
padding: 10px;
background-color: #2196F3;
}
.navigation .navbar a:hover{
background-color: rgb(89,160,241);
}
.navigation .navbar .dropdown li {
display: block;
text-align: left;
padding: 9px;
background-color: rgb(89,241);
min-width: 120px;
}
.navigation .navbar .dropdown li a{
background-color: rgb(89,241);
}
.navigation .navbar .dropdown{
position:absolute;
opacity: 0.9;
padding: 10px 10px;
display: none;
}
.navigation .navbar li:hover ul.dropdown{
display: block;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)