Should be change the dropdown and dropdown-content html code.

Actual code:

<div class="dropdown"><p><strong><span style="color: #ff0000;">MENU</span></strong></p>
 <div class="dropdown-content">
 <p><a href="../blank2pagecopy2/">Hello World!</a></p>
 <p><a></p>
 </div>
 </div>

Updated code:

<div class="dropdown"><p><strong><span style="color: #ff0000;">MENU</span></strong></p></div>
 <div class="dropdown-content">
 <p><a href="../blank2pagecopy2/">Hello World!</a></p>
 <p><a></p>
 </div>
 

Change the blow css

Actual code:

.dropdown-content
{
display: none;
position: absolute;
background-color: #ff0000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: auto;
}

Updated code:

.dropdown-content
{
visibility: hidden;
position: absolute;
background-color: #ff0000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 99999;
transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
}
.dropdown p:hover .dropdown-content
{
 visibility: visible;
opacity: 1;
}

[ Signature deleted ]

I tried to get it to work many different ways. Did not, not sure what I’m doing wrong.

No drop down when hover. Also trying different ways got blank drop down and pushed all under word “MENU” down not on top.

Trying to get drop down centered under word “MENU” and link tesx in drop down justify left. Black text on white box. All on top of all under the word “MENU”

Drawing on https://signmasters.com/menu-mock/

Thanks A MIL!!!

USAMark