Link: test.getfamo.us
Problem: The drop-down menu is not functioning properly when hovered over due to the main box covering it.
I initially avoided using percentages for height in my website design, but after facing display issues on different monitors, I switched everything to px. To ensure the main box did not overlap with the header or footer, I used this CSS:
#content #main {
position: absolute;
top: 70px;
bottom: 15px;
width:100%;
}
The issue arose with the header, where this CSS was applied:
#content #header {
height: 70px;
width: 100%;
}
I would like the main box to adjust its size dynamically for optimal viewing on all screen sizes while ensuring the drop-downs are visible. How can I resolve this dilemma?
If more information is needed, you can access my CSS here:
Thank you!