CSS MegaMenuのホバリングでネストされたコンテンツが表示される

Question

メガナビを構築しようとしていましたが、アンカーをターゲットに設定し、そのドロップダウンコンテンツを自動的に表示する方法がわかりません。私はcodepenに関する私の仕事の例を持っています。http://codepen.io/shanekweb/pen/EZpjKo

例として、私が最初のリンクNewsにマウスを乗せて、さらにいくつかのリンクが現れたら、私は "one"の右側に飛び出すコンテンツが必要ですメインアイテムのニュースが表示されたときに自動的に表示されます。

メインアイテムが上に乗ったときに、最初のすべてのサブリンクのコンテンツをすぐに見るようにする必要があります。私は、CSSにしようとしていた何

<div class="droppable"> 
     <a class="firstLink" href="#">News</a> 
     <div class="megaNav"> 
      <div class="drop1st"> 
       <div class="parentMenu"> 
        <ul> 
         <li><strong>first heading</strong></li> 
         <li class="expand"> 
          <a href="#">one</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 1</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 2</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 3</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
         <li class="expand"> 
          <a href="#">two</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 4</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 5</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 6</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
         <li class="expand"> 
          <a href="#">three</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 7</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 8</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 9</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div><!--megaNav--> 
    </div><!--droppable--> 


    <div class="droppable"> 
     <a class="firstLink" href="#">top brands &amp; agencies</a> 
     <div class="megaNav"> 
      <div class="drop1st"> 
       <div class="parentMenu"> 
        <ul> 
         <li><strong>second heading</strong></li> 
         <li class="expand"> 
          <a href="#">one</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 1</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 2</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 3</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
         <li class="expand"> 
          <a href="#">two</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 4</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 5</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 6</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
         <li class="expand"> 
          <a href="#">three</a> 
          <div class="rightContent"> 
           <section class="rightContent1"> 
            <h4>Title 7</h4> 
           </section><!--rightContent1--> 
           <section class="rightContent2"> 
            <h4>Title 8</h4> 
           </section><!--rightContent2--> 
           <section class="rightContent2"> 
            <h4>Title 9</h4> 
           </section><!--rightContent3--> 
          </div><!--rightContent--> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div><!--megaNav--> 
    </div><!--droppable--> 

</nav><!--mainNav--> 



#mainNav { 
margin: auto; 
max-width: 1242px; 
position: relative; 
box-sizing: border-box; 

a { 
    text-decoration: none; 
} 

.droppable { 
    float: left; 

    a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child { 
     > .rightContent { 
      display: block; 
     } 
    } 

    > a { 
     padding: 5px 15px; 
    } 

    .megaNav { 
     display: none; 
     position: absolute; 
     left: 0; 
     width: 100%; 

     .drop1st { 
      overflow: auto; 
      position: relative; 
      z-index: 2; 
      background: #fff; 
      min-height: 380px; 
      background: #efefef; 

      .parentMenu { 
       width: 16%; 
       min-height: 380px; 
       background: #fafafa; 

       ul { 
        margin-left: 0; 
        list-style: none; 
        padding-left: 0; 
       } 

       li.expand:hover > div { 
        display: block; 
       } 

       .rightContent { 
        display: none; 
        position: absolute; 
        left: 16%; 
        top: 0; 
        width: 84%; 
        min-height: 380px; 

        h4 { 
         margin: 0; 
        } 

        .rightContent1 { 
         width: 25%; 
         float: left; 
        } 

        .rightContent2 { 
         width: 25%; 
         float: left; 
        } 

        .rightContent3 { 
         width: 50%; 
         float: left; 
        } 
       } 

       ul { 
        margin: 0; 
       } 

      } 
     } 
    } 

    &:hover { 
     .megaNav { 
      display: block; 
     } 
    } 
} 
} 

、このようなものだったが、私はそれが

a.firstLink:hover > .megaNav > .parentMenu > li.expand:first-child { 
    > .rightContent { 
     display: block; 
    } 
} 

Answer 1

を動作させることはできませんあなたは.megaNavを選択するためにsibling selector（+）を使用することができます.firstLinkに続いて、>セレクタを使用する代わりに単純なネストを使用します（つまり、.classone .classtwo）。これは、特定のケースで過度に特定されています。 （例えば、.parentMenuの親は.drop1st、ない.megaNavので、.megaNav > .parentMenuは何も選択しません。）

またdisplay: noneの他のスタイルを上書きする!importantを使用する必要があります。

結果は次のようになります。

.firstLink + .megaNav .parentMenu li.expand:nth-of-type(2) .rightContent { 
    display: block !important; 
} 

ヘッズアップ、しかし、それはあなたが!importantでdisplay: noneとdisplay: blockをトグルする必要がありますのでつもりはすべてが正しく表示させるために、そのルールのバリエーションの多くを必要としますたびに、たくさんのCSSを作っています。可能であれば、マークアップを少し簡略化して、CSS規則を具体的にしないようにして、!importantを使わずに立ち去るようにしてください。