放下 - 子菜单菜单消失时悬停
问题描述:
一切都很好,除了子菜单,而悬停...它消失在悬停。我确定悬停中存在一些问题。即放下 - 子菜单菜单消失时悬停
.dropdown-content a:hover + .dropdown-submenu {
display: block;
}
.icon-cadet-left {
float: right;
}
.dropbtn {
overflow: hidden;
width: 300px;
background-color: #338d99;
color: white;
padding: 16px;
font-family: 'Play';
font-size: 20px;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e0e0e0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin:0px;
}
.dropdown-content a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-submenu {
display: none;
margin:0px;
background-color: #e0e0e0;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 100%;
top: 0px;
}
.dropdown-submenu a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color:#909090;
}
.dropdown-submenu a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover + .dropdown-submenu {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #29727c;
}
<div class="pricing-button">
<div class="dropdown">
<button class="dropbtn">Logo Design</button>
<div class="dropdown-content animated bounce">
<a href="#">Logo & Identity<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a href="#">Sationary</a>
<a href="#">Holiday Doodles</a>
</div>
<a href="#">Business & Advertising<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
<a href="#">Website & Digitals<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Option 01</a>
<a>Option 02</a>
<a>Option 03</a>
<a>Option 04</a>
</div>
<a href="#">Textile Designing<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
</div>
</div>
</div>
答
你只是忘了添加.dropdown-submenu:hover
您display: block;
规则。如果没有,则子菜单会消失,因为您不再悬停在a
标签上。
.icon-cadet-left {
float: right;
}
.dropbtn {
overflow: hidden;
width: 300px;
background-color: #338d99;
color: white;
padding: 16px;
font-family: 'Play';
font-size: 20px;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e0e0e0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin: 0px;
}
.dropdown-content a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-submenu {
display: none;
margin: 0px;
background-color: #e0e0e0;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 100%;
top: 0px;
}
.dropdown-submenu a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: #909090;
}
.dropdown-submenu a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover + .dropdown-submenu,
.dropdown-submenu:hover {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #29727c;
}
<div class="pricing-button">
<div class="dropdown">
<button class="dropbtn">Logo Design</button>
<div class="dropdown-content animated bounce">
<a href="#">Logo & Identity<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a href="#">Sationary</a>
<a href="#">Holiday Doodles</a>
</div>
<a href="#">Business & Advertising<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
<a href="#">Website & Digitals<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Option 01</a>
<a>Option 02</a>
<a>Option 03</a>
<a>Option 04</a>
</div>
<a href="#">Textile Designing<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
</div>
</div>
</div>
答
您应该使用
.dropdown-content:hover .dropdown-submenu {
而不是
.dropdown-content a:hover + .dropdown-submenu {
其原因是,一旦你移动鼠标悬停.dropdown-submenu
a
节点不再徘徊,因此.dropdown-submenu
不是blocked
。
这里是一个工作版本:
.icon-cadet-left {
float: right;
}
.dropbtn {
overflow: hidden;
width: 300px;
background-color: #338d99;
color: white;
padding: 16px;
font-family: 'Play';
font-size: 20px;
border: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e0e0e0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin:0px;
}
.dropdown-content a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-submenu {
display: none;
margin:0px;
background-color: #e0e0e0;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 100%;
top: 0px;
}
.dropdown-submenu a {
width: 300px;
color: black;
font-family: 'Play';
letter-spacing: 2px;
padding: 12px 16px;
text-decoration: none !important;
display: block;
text-align: center;
border-bottom: 0.1em solid #333;
border-radius: 5%;
text-transform: uppercase;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color:#909090;
}
.dropdown-submenu a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content:hover .dropdown-submenu {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #29727c;
}
<div class="pricing-button">
<div class="dropdown">
<button class="dropbtn">Logo Design</button>
<div class="dropdown-content animated bounce">
<a href="#">Logo & Identity<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a href="#">Logo Design</a>
<a href="#">Business Cards</a>
<a href="#">Sationary</a>
<a href="#">Holiday Doodles</a>
</div>
<a href="#">Business & Advertising<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
<a href="#">Website & Digitals<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Option 01</a>
<a>Option 02</a>
<a>Option 03</a>
<a>Option 04</a>
</div>
<a href="#">Textile Designing<i class="fa fa-caret-right icon-cadet-left"></i></a>
<div class="dropdown-submenu">
<a>Sample 01</a>
<a>Sample 02</a>
<a>Sample 03</a>
<a>Sample 04</a>
</div>
</div>
</div>
</div>