放下 - 子菜單菜單消失時懸停

Question

一切都很好，除了子菜單，而懸停...它消失在懸停。我確定懸停中存在一些問題。即

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

Answer 1

你只是忘了添加.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>

Answer 2

您應該使用

.dropdown-content:hover .dropdown-submenu { 

而不是

.dropdown-content a:hover + .dropdown-submenu { 

其原因是，一旦你移動鼠標懸停.dropdown-submenua節點不再徘徊，因此.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>