/* Styling for the main menu item */
li.mom {
    position: relative; /* This is important for positioning the dropdown */
}

/* Dropdown menu hidden by default */
ul.dropdown {
    display: none; /* Hide by default */
    position: absolute; /* Position it below the main item */
    background-color: #f9f9f9;
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding from dropdown */
    margin: 0; /* Remove margin from dropdown */
    top: 100%; /* Position it below the parent list item */
    left: 0; /* Align it to the left of the parent */
    z-index: 1;
}

li.mom:hover .dropdown {
    display: block; /* Show the dropdown when hovering over the parent */
}

/* Styling for individual dropdown items */
ul.dropdown li {
    border-bottom: 1px solid #ddd; /* Optional border between items */
}

ul.dropdown li a {
    text-decoration: none;
    color: black;
    padding: 12px 16px;
    display: block; /* Make each item block level so they stack vertically */
}

/* Hover effect for dropdown items */
ul.dropdown li a:hover {
    background-color: #ddd; /* Change background on hover */
}