Equal Width Navbar Links with dropdown - css

Question

I would like to convert the Help link to a drop-down on hover. Do I have to convert this to an un-ordered list or can I use the existing structure. Thanks in advance.
<div class="navbar-project">
Details
Forms
Documents
Help
</div>
CSS
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}

Answer 1

the best way to handle the dropdowns is to put them inside ul, you can adopt the below code in your existing code
<nav role="navigation">
<ul>
<li>Button One</li>
<li>Button Two
<ul class="dropdown">
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
<li>Button Three</li>
</ul>
</nav>
and your css
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}

Answer 2

You just need turn the Help item in a ul, create the li items and than use the display: none; to hide it, after that you can use hover in the ul and specify that you want the li items to appear using display: block;.
.navbar-project {
width: 100%;
background-color: #fff;
overflow: auto;
margin-top: 25px;
margin-bottom: 25px;
}
.navbar-project a {
float: left;
padding: 12px;
color: #000;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
border-bottom: 3px solid white;
}
.navbar-project a:hover {
border-bottom: 3px solid black;
}
.navbar-project a.active {
background-color: #fff;
border-bottom: 3px solid red;
}
.navbar-project ul{
display: flex;
flex-direction: column;
}
.navbar-project ul li{
display: none;
}
.navbar-project ul:hover li{
display: block;
}
#media screen and (max-width: 500px) {
.navbar-project a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
<div class="navbar-project">
Details
Forms
Documents
<ul>Help
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Note: I believe that for the sake of semantics it's good to always use ul or
ol in your nav menu as Kai explained in the other comment, so you just
need create another list inside the first one as I demonstraded.
Edit: I did some modifications and this time the width of 25% is working, this is the example