CSSのテキストにカーソルを合わせる

Question

メニュータイトルの上にカーソルを置くと、メニュー（div）にフェードインしようとしています。ここで

はHTMLである：ここでは

<p class="menu_Title"> //menu </p> 
<div class = "menuitems"> 
    <a href="#">Profile</a><br> 
    <a href="#">Experiences</a><br> 
    <a href="#">Skills</a><br> 
    <a href="#">Contact</a><br> 
</div> 

がCSSです：

.menuitems a { 
    text-decoration: none; 
} 

.menuitems { 
    opacity: 0; 
    transition: opacity .25s ease-in; 
} 

.menu_Title:hover .menuitems { 
    transition-delay: 0.1s; 
    opacity: 1; 
} 

私は、スクリプトがある（私はdiv要素の中に全体の事を入れて、その後のdivを置く場合、それが動作することを知っています以下）、これを行うときに問題が発生します。タイトル全体にカーソルを合わせるとメニューが表示され、div全体では表示されません。誰にもこれに対する解決策がありますか？

'作業' HTML：

<div class="h"> //ADDED THIS 
    <p class="menu_Title"> //menu </p> 
     <div class = "menuitems"> 
      <a href="#">Profile</a><br> 
      <a href="#">Experiences</a><br> 
      <a href="#">Skills</a><br> 
      <a href="#">Contact</a><br> 
     </div> 
</div> //and this 

'作業' CSS：

.menu_Title:hover { 
    letter-spacing: 3px; 
} 

.menuitems a { 
    text-decoration: none; 
} 

.menuitems{ 
    opacity: 0; 
    transition: opacity .25s ease-in;  
} 

.h:hover .menuitems{ //THIS IS THE ONLY LINE THAT CHANGES 
    transition-delay: 0.1s; 
    opacity: 1;  
} 

Answer 1

あなたは次のように次の兄弟セレクタを使用する必要があります。私はそれをテストしてきたし、それが動作

.menu_Title:hover + .menuitems{ 
    transition-delay: 0.1s; 
    opacity: 1; 
} 

！ ; ``あなたの.menuitems A`ルールでブロック：

Answer 2

はこれを試して....

.menu_Title:hover .menuitems > a { 
    transition-delay: 0.1s; 
    opacity: 1; 
} 

Answer 3

はこれを試してみてください。

​​

この>は、次の要素（.menuitems）を標的とします。

Answer 4

は、単に ``表示がbr`タグの使用を取り除く、先端のよう

.menu_Title:hover+.menuitems{ 
    transition-delay: 0.1s; 
    opacity: 1; 
}