ドロップダウン - サブメニューメニューホバー中に消える

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

あなたは自分のdisplay: block;ルールに.dropdown-submenu:hoverを追加するのを忘れ：ここ

は作業バージョンです。ない場合、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>