How to change Dawn header menu on different pages in Shopify

 {% if template.suffix == "cosmos-header" %}
         {% assign menu = linklists.cosmos-menu.links %}  
          {% else %}
         {% assign menu = section.settings.menu.links %}  
        {% endif %}

        <nav class="header__inline-menu sirhc">
             <ul class="list-menu list-menu--inline" role="list">
                {% for link in menu %}
                    <li class="header__menu-item{% if link.links.size > 0 %} has-dropdown{% endif %}">
                        <a href="{{ link.url }}" class="header__menu-item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                            <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        </a>
        
                        {% if link.links.size > 0 %}
                            <ul class="dropdown">
                                {% for sublink in link.links %}
                                    <li>
                                        <a href="{{ sublink.url }}" class="header__submenu-item link link--text focus-inset"{% if sublink.current %} aria-current="page"{% endif %}>
                                            {{ sublink.title | escape }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </nav>



<style>
  .dropdown {
    display: none; /* Initially hide the dropdown */
    position: absolute; /* Position the dropdown */
    padding: inherit;
    z-index: 1000; /* Ensure dropdown appears above other content */
    width: 20rem;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    background-color: rgb(var(--color-background));
}

.header__menu-item:hover .dropdown {
    display: block; /* Show dropdown on hover */
  color: rgb(var(--color-foreground));
}
  
.dropdown li {
    padding: 8px; /* Padding for each dropdown item */
  list-style: none;
}

.dropdown li a {
    display: block; /* Make the dropdown items block elements */
    text-decoration: none; /* Remove underline from links */
    color: black; /* Text color for dropdown items */
}

.header__menu-item:hover > a {
    color: #007bff; /* Change color on hover for parent item */
}

/* .dropdown li a:hover {
    background-color: #f0f0f0; /* Background color on hover */
} */
</style>