ドロップダウンブロック付きの動的ナビゲーションメニューを結合

Question

アイテムが90度回転するナビゲーションメニューがあります。私は、ナビゲーション項目をホバリングするときに表示されるドロップダウンブロックと組み合わせて、項目の動的な振る舞いを維持したいと考えています。

ダイナミックナビゲーションパネルのキーCSSコードはここにある：

.dropdown-content { 
    display: none; 
    background-color: #f9f9f9; 
} 

.dropdown-content a { 
    font-size: inherit; 
    font-weight:inherit; 
    display: block; 
    background-color: beige; 
    color: red; 
} 

.dropdown-content a:hover {background-color: #002147} 

.R-dropdown:hover .dropdown-content { 
    display: block; 
} 

キーHTMLコード：これに

.buttons-wrapper { 
    display: block; 
    text-align: center; 
    margin-bottom: 20px; 
} 

.buttons { 
    display: inline-flex; 
    position: relative; 
    width: 87%; 
    text-decoration: none; 
    cursor: pointer; 
} 

.buttons>div { 
    display: inline-flex; 
    position: relative; 
    width: 100%; 
    height: 40px; 
    margin: 0; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    perspective: 1000px; 
} 

.buttons>div>a { 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    font-size: 18px!important; 
    font-weight: bold!important; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform: translateZ(-20px); 
    -moz-transform: translateZ(-20px); 
    -ms-transform: translateZ(-20px); 
    -o-transform: translateZ(-20px); 
    transform: translateZ(-20px); 
    -webkit-transition: -webkit-transform 0.25s; 
    -moz-transition: -moz-transform 0.25s; 
    transition: transform 0.5s; 
} 

.buttons>div>a::before, .buttons>div>a::after { 
    justify-content: center; 
    align-items: center; 
    margin: 0; 
    width: 150px; 
    height: 40px; 
    padding-left: 10px; 
    padding-right: 10px; 
    position: absolute; 
    border: 2px solid black; 
    box-sizing: border-box; 
    content: attr(title); 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

.buttons>div>a::before { 
    background-color: beige; 
    color: #000; 
    -webkit-transform: rotateY(0deg) translateZ(20px); 
    -moz-transform: rotateY(0deg) translateZ(20px); 
    -ms-transform: rotateY(0deg) translateZ(20px); 
    -o-transform: rotateY(0deg) translateZ(20px); 
    transform: rotateY(0deg) translateZ(20px); 
} 

.buttons>div>a::after { 
    background-color: #002147; 
    color: #fff; 
    -webkit-transform: rotateX(90deg) translateZ(20px); 
    -moz-transform: rotateX(90deg) translateZ(20px); 
    -ms-transform: rotateX(90deg) translateZ(20px); 
    -o-transform: rotateX(90deg) translateZ(20px); 
    transform: rotateX(90deg) translateZ(20px); 
} 

.buttons>div>a:hover { 
    -webkit-transform: translateZ(-20px) rotateX(-90deg); 
    -moz-transform: translateZ(-20px) rotateX(-90deg); 
    -ms-transform: translateZ(-20px) rotateX(-90deg); 
    -o-transform: translateZ(-20px) rotateX(-90deg); 
    transform: translateZ(-20px) rotateX(-90deg); 
} 

.buttons>div>a.selected::before { 
    color: white; 
    background-color: #002147; 
} 

、私はこのように、ドロップダウンメニューを追加します次のとおりです。

<div class="buttons-wrapper"> 
     <div class="buttons"> 
      <div id="b-h"> 
       <a class="selected" href="index.xhtml" title="HOME"></a> 
      </div> 
      <div id="b-a"> 
       <a href="about.xhtml" title="ABOUT"></a> 
      </div> 
      <div id="b-e"> 
       <a href="events.xhtml" title="EVENTS"></a> 
      </div> 
      <div class="R-dropdown"> 
       <a href="join.xhtml" title="RESOURCES"></a> 
      <div class="dropdown-content"> 
       <a href="#">Econometrics</a> 
       <a href="#">Macroeconomics</a> 
       <a href="#">Other</a> 
      </div>    
      </div> 
      <div id="b-c"> 
       <a href="contact.xhtml" title="CONTACT US"></a> 
      </div> 
     </div> 
    </div> 

jsfiddle hereが表示されます。私はそれを働かせることはできません。私はおそらく、単一のCSS項目にelemebtsの2種類（湖底ラッパーとドロップダウンメニューを結合する必要がありますか？彼らは分離されている現時点では。

Answer 1

置き換える

.buttons>div>a:hover 

.buttons>div:hover>a 

と

divにはドロップダウンコンテンツが含まれているため、ドロップダウンにカーソルを合わせるとコンテンツが有効になります。