Раздел раскрывающегося списка HTML не переместится в раздел href. ⇐ CSS

[Anonymous]

I am trying to set a dropdown that can move to sections specified in herf

Here is my initial code

here are more details as to what I am trying to do as requested I have a button panel and this drop-down I am trying to switch between 2 when under specific px

ABOUT ME PROJECTS Resume Menu

• About Me
• Projects
• Resume

According to this, about should go to the about section and projects to projects as mentioned in herf tags
but the li a are not getting clicks or cannot process them.

I have tried this js below that I took from another stack post - I did change the herf to data-herf when I was attempting this - Yet I could not resolve this.

$(document).ready(function() { $('a[data-href]').click(function(event) { event.preventDefault(); var sectionToNavigate = $(this).attr('data-href'); if(sectionToNavigate && $(sectionToNavigate).length) { $('html, body').animate({ scrollTop: $(sectionToNavigate).offset().top }, 1000); } }); }); My CSS I missed in original post

.dropdown-content li a { color: #000000; /* Adjust as needed */ text-decoration: none; display: block; padding: 10px; pointer-events: all; } .dropdown-btn:focus + .dropdown-content, .dropdown-btn:active + .dropdown-content { display: block; position: absolute; background-color: #ffff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /*------------------------------------------*/ #resume,#projects-button { padding: 10px 20px; background-color: #ffff; font-size: 1.5em; border-radius: 20px; color: #000000; border: 2px solid #000000; cursor: pointer; } #resume:hover,#projects-button:hover{ background-color: #e5e1e2; } #resume a { color: inherit; text-decoration: inherit; } #panel-links{ font-size: 1.5em; background-color: #ffff; color: #000000; border: none; cursor: pointer; padding: 10px 20px; } #panel-links:hover { background-color: #e5e1e2; border-radius: 10px; } #projects-button{ min-width: 40%; font-size: 1.2em; border-radius: 10px; } .dropdown { max-width: 13em; position: relative; width: 100%; } .dropdown-btn { width: 100%; color: #ffff; align-items: center; padding: 10px 20px; background-color: #ffff; font-size: 1em; border-radius: 20px; color: #000000; border: 2px solid #000000; cursor: pointer; } .dropdown-content { display: none; width: 100%; padding: 0; /* Hide dropdown content by default */ position: absolute; /* Position it relative to its parent */ left: 50%; /* Start from the middle of the parent */ transform: translateX(-50%); /* Center it exactly */ background-color: #ffffff; /* White background */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional: Adds a slight shadow for depth */ z-index: 1; /* Ensure it's above other content */ } .dropdown-content li { text-align: center; width: 100%; text-decoration: none; display: block; padding: 2px; } .dropdown-content li a { color: #000000; /* Black text */ display: block; /* Make each link fill its container for easier clicking */ } .dropdown-btn:focus + .dropdown-content li { left: 0; } .dropdown-btn:focus + .dropdown-content { visibility: visible; } .dropdown-content li a:hover { background: #cbc9ca; /* Apply hover effect to the link's background */ } .dropdown-content li:hover { background: #b7b1b4; } I have read other posts which conclude it is a browser issue. But I have tried Edge, chrome, and Brave, and none seem to work.


Источник: https://stackoverflow.com/questions/781 ... ef-section