JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<div class="navigation">
            <nav>
                <ul>
                    <li class="dropdown">
                        <a href="/Profile-Alerts">Profile</a>
                        <br>
                        <div class="dropdown-content">
                            <a href="/Profile-Alerts">Alerts</a><br>
                            <a href="/Profile-Home">Home</a><br>
                            <a href="/Profile-College">College</a><br>
                            <a href="/Profile-GCSEs">GCSEs</a><br>
                            <a href="/Profile-Applications">Applications</a><br>
                            <a href="/Profile-Staff">Staff</a><br>
                            <a href="/Profile-Support">Support</a><br>
                            <a href="/Profile-Links">Links</a>
                        </div>
                    </li>

                    <li><a href="/Groups">Groups</a></li>

                    <li class="dropdown">
                        <a href="/Times-Timetable">Times</a>
                        <br>
                        <div class="dropdown-content">
                            <a href="/Times-Timetable">Timetable</a><br>
                            <a href="/Times-Rooms">Rooms</a><br>
                            <a href="/Times-Appointments">Appointments</a><br>
                        </div>    
                    </li>

                    <li><a href="/Attendance">Attendance</a></li>

                    <li class="dropdown">
                        <a href="/Tracking-Markbook">Tracking</a>
                        <br>
                        <div class="dropdown-content">
                            <a href="/Tracking-Markbook">Markbook</a><br>
                            <a href="/Tracking-Progress">Progress</a><br>
                            <a href="/Tracking-Action-Plan">Action Plan</a><br>
                            <a href="/Tracking-Summer-Work">Summer Work</a>
                        </div>
              ...

CSS

.navigation {
    background-color: rgb(154, 154, 62);
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.navigation ul {
    list-style: none;
    display: flex;
    justify-content: stretch;
    font-size: 1em;
    padding: 0;
}

.navigation li {
  flex: 1 1 auto;
  position: relative;
  text-align: center;
  padding: 0.5em;
}

.navigation li a{
    text-decoration: none;
    color: white;
}

.navigation li a:hover {
    color: aqua;
    text-decoration: underline white;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: rgb(154, 154, 62);
    padding: 10px;
    text-align: center;
    border-radius: 0.5em;
    box-sizing: border-box;
    
}

.dropdown:hover .dropdown-content {
    display: inline-block;
}

.dropdown-content a {
    padding-bottom: 5px;
    
}