要素をホバーすると2番目の要素が表示されます。どのように2番目の要素を最初のホバリングの後に見えるように保つ？

Question

<a>要素を使用してHTML/CSSのドロップダウンメニューを作成しようとしています。これまでのところ、私は二次的なものを手に入れました。<a>（最初の<a>がぶら下げられていないときは表示されず/隠されています）。これはそれ自体私にとって大きな成功ですが、最初に<a>をホバーしなくても、2番目のものが消えてしまうので、セカンダリ<a>をクリックすることができません。

私が2番目をホバリングしている限り、それをどのように維持するのですか？<a>？

body { 
 
    background-color: rgb(245, 245, 220); 
 
} 
 
.dropdownbutton { 
 
    display: block; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: #8B6969; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.4s; 
 
    transition-duration: 0.4s; 
 
} 
 
.dropalt1 { 
 
    display: none; 
 
    width: 236px; 
 
    height: 35px; 
 
    background-color: white; 
 
    text-align: center; 
 
    font-family: Verdana; 
 
    line-height: 33px; 
 
    -webkit-transition-duration: 0.2s; 
 
    transition-duration: 0.2s; 
 
} 
 
.dropdownbutton:hover + .dropalt1 { 
 
    display: block; 
 
} 
 
a:link { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
a:active { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
} 
 
a:hover { 
 
    color: white; 
 
    text-decoration: none; 
 
    background-color: rgb(128, 128, 128); 
 
}

<a class="dropdownbutton" href="#">Click me!</a> 
 
<a class="dropalt1" href="#">Link 1</a>

Answer 1

あなたはラッピング要素を使用することになるはずです。たとえば、（両方の要素の）親ラッパーが上にホバーされている場合は、目的の要素（親を展開する要素）を表示する必要があります。

親からホバリングしたときにのみ、ターゲットアイテムが非表示になります。

.hidden-child { 
    display: none; 
} 

.parent:hover .hidden-child { 
    display: block; 
} 

非常rudimentary example

Answer 2

あなたはそれが推移いる間目に見えるとどまることを第二のアンカーを強制的にこのスタイルを追加することができます。

.dropalt1:hover { 
    display: block; 
} 

Fiddle

Answer 3

あなたがしなければならないのは、.dropalt1:hoverを追加することですホバーに表示されたままになるように、ブロックを表示ブロックにします。

あなたのCSSファイルにこれを追加します。

.dropalt1:hover { 
    display: block; 
}