カーソルを乗せると表が表示されるようにしたい(表示されたの表の中身もドロップダウンメニューのように選択できるようにしたい)

文字の上にカーソルをホバーさせるとgridで作った表が下に表示されて、中身のテキストを選択できるようにしたいです。(表示/非表示切り替えるだけでなくドロップダウンメニューのように表の中身を選択できるようにしたいです。)

追記
「display: none;」「display: block;」で表示と非表示を切り替えようとしましたがうまくいきません。

・文字の上にカーソルを乗せるまで表は表示しない。
・文字の上にカーソルが乗ると文字の下に表が表示される。
・表示された表はドロップダウンメニューのように選択できる(ただ表示と非表示を切り替えるだけでなく。)

html

<p class="text">ここにカーソルを乗せて</p> <div class="grid-1"> <div class="item1-1">A</div> <div class="item1-2">B</div> <div class="item1-3">C</div> <div class="item1-4">D</div>

css

.grid-1 {
display: grid;
grid-template-columns: 150px 150px;
grid-template-rows: auto auto;
color: white;
font-size: 16px;
display: none;
}

.text:hover .grid-1 {
display: block;
}

.item1-1{
background: rgb(0, 0, 0);
}
.item1-2{
background: rgb(0, 0, 0);
}
.item1-3{
background: rgb(0, 0, 0);
}
.item1-4{
background: rgb(0, 0, 0);
}