Dropdowns in the header is listing options of other dropdowns

Using Streamlit
,
1

If you’re creating a debugging post, please include the following info:

  1. Are you running your app locally or is it deployed? Deployed

  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform? internal company portal
    b. Share the link to the public deployed app.

  3. Share the link to your app’s public GitHub repository (including a [requirements file]

  4. Share the full text of the error message (not a screenshot). I created 2 dropdowns. When i hover over first dropdown, it shows the 2 options below it. When i hover over the 2nd dropdown, it shows the options of both 1 and 2 dropdowns. Sharing the screenshot.

  5. Share the Streamlit and Python versions. python 3.12, Streamlit, version 1.38.0

     /* Style for AWS Dashboards dropdown */
 .aws-dropdown-content {
     display: none;
     position: absolute;
     background-color: #ff6a00;
     min-width: 160px;
     z-index: 1;
 }
 .aws-dropdown:hover .aws-dropdown-content {
     display: block;
 }
 /* Style for Mock Dashboards dropdown */
 .mock-dropdown-content {
     display: none;
     position: absolute;
     background-color: #ff6a00;
     min-width: 160px;
     z-index: 1;
 }
 .mock-dropdown:hover .mock-dropdown-content {
     display: block;
 }
 /* Common dropdown link style */
 .dropdown-content a {
     color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
 }
 .dropdown-content a:hover {
     background-color: #ddd;
     color: black;
 }

st.markdown(“”"

<div class="header">
    <div style="background-color: #ff6a00; padding: 10px;">
        <a href="myhomepage/" style="color: white; margin-right: 10px; " target="_self">Home</a>            
        <div class="aws-dropdown" style="display: inline-block; margin-right: 10px;">
            <span style="color: white; margin-right: 10px;">AWS-Dashboards &darr;</span>
            <div class="aws-dropdown-content dropdown-content">
                <a href="link1" style="color: white;" >Service Health</a>
                <a href="link2" style="color: white;" >Health & SR</a>
            </div>               
        <div class="mock-dropdown" style="display: inline-block; margin-right: 10px;">
            <span style="color: white; margin-right: 10px;">Mock Dashboards &darr;</span>
            <div class="mock-dropdown-content dropdown-content">
                <a href="link3" style="color: white;" >Service Health</a>
                <a href="link4" style="color: white;" >Health & SR</a>
            </div>
        </div>           
    </div>
</div>

“”", unsafe_allow_html=True)
pic 1
pic 2