CSS MegaMenu hovering показывает вложенный контент

Question

Я пытался создать мега-навигатор, и я не могу понять, как настроить таргетинг на якорь и автоматически отображать его раскрывающийся контент. У меня есть пример моей работы над codepen по адресу http://codepen.io/shanekweb/pen/EZpjKo

Так, например, если я нахожусь над первой ссылкой, появляется новость и некоторые другие ссылки, мне нужен контент, который появляется справа для «одного» автоматически появляются, когда основной элемент новостей завис.

Мне нужно это, чтобы клиент сразу увидел содержимое всех первых ссылок, когда основные элементы зависли.

<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; 
     } 
    } 
} 
} 

То, что я пытался в CSS было что-то вроде этого, но я не могу заставить его работать

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

Answer 1

Вы можете использовать sibling selector (+), чтобы выбрать .megaNav который следует за .firstLink, а затем используйте простое вложение - то есть .classone .classtwo - вместо использования селектора >, который является чрезмерно конкретным в некоторых случаях, когда у вас его было. (Например, родитель .parentMenu является .drop1st, не .megaNav, так .megaNav > .parentMenu ничего не отберет.)

Вы также должны будете использовать !important переопределить другие стили display: none.

Результат будет выглядеть так:

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

Heads вверх, однако, что собирается требовать много вариаций этого правила, чтобы сделать все правильно отображаться, потому что вы должны быть переключая display: none и display: block с !important каждый раз, делая для большого количества CSS. Если возможно, вы можете попытаться упростить разметку и сделать свои правила CSS менее конкретными, чтобы вы могли уйти, не используя !important.