Header not displaying properly on website

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!

Answer №1

Include a z-index property in the ul element.

ul li ul {
    box-shadow: none;
    display: none;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 48px;
    transition: opacity 0.2s ease 0s;
    visibility: hidden;
    width: 150px;
    z-index: 50;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to determine the value or array that has been passed in the form?

I am facing a challenge and need help solving it. I have a project that involves interacting with a database, where I created a CRUD HTML table for data manipulation. There are 15 tables in the relative database, and I need to insert, delete, and edit reco ...

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

Creating a personalized, perfectly centered container with a specific width in Twitter Bootstrap

I've been struggling with a unique challenge for the past day without success. I can't seem to figure out where I am making a mistake. My goal is to design a fixed container layout using Bootstrap, which is precisely 33em wide and horizontally c ...

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

Create a boundary behind the title on a see-through backdrop

How can I create a design where there is a line to the left and right of a headline? Usually, I would use border-top on the surrounding element and style the headline with some CSS properties like this: h2 { margin-top: -10px; padding: 0 5px; b ...

Enhanced auto-zoom feature with orientation change for iOS 7

My web page was functioning perfectly until the release of iOS 7 by Apple today, causing the layout to break when the screen orientation is changed. When focusing on a text area and rotating the screen to landscape view, the entire page zooms in. However, ...

Transition smoothly between sections using fullPage.js with clipping path effects

I am looking to create a unique clipping animation utilizing SVG clipping path. The animation should hide the first section while revealing the second section in a smooth transition using fullPage.js. This idea is somewhat similar to the question discusse ...

utilize the "li" element to function as a clickable button

My HTML code contains ul elements, as shown below: <ul class="nav" id="loadCategories"> <li class="sub-menu"><a href="#">Search by category</a> <ul class=""> <li><a href="#">Food</a></li> ...

Parsing HTML with Qt library isn't able to detect any elements

I am currently working on a web crawling application. Within the code, I have the following snippet: // Normally, the HTML content is retrieved from the web using QNetworkAccessManager & QNetworkReply: // QString htmlCode = this->reply->readAll( ...

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing): number 1 <spacer height="'200px'"></spa ...

Pytest is not able to locate any elements on the webpage, yet the same elements can be easily found using the console

When using CSS or XPath in the console (F12), I am able to locate the element on the page. $$("span.menu-item[data-vars-category-name='Most Popular']") However, when trying to find the same elements with Selenium (pytest) using: driver.find_el ...

JS selection-dropbox

As someone who is relatively new to JS, I am struggling a bit. The goal of the code is to display items with specific content (ALL, A, B, C). While the code works fine with buttons, I can't seem to get it to work with a 'Dropdown-select', ...

Creating a Laravel form with a toggle checkbox for submission

Within the form, there is a toggle switch button. The purpose of this switch button is to determine whether it is in an active or passive state. Upon submitting the form, its value will be "on". My goal is to send this value to the controllers as "passive" ...

Could someone please explain the meaning of that in Bootstrap in a clear and detailed manner?

<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> I attempted to utilize bootstrap, yet I am struggling to grasp it ...

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

Interactive email with a dynamic dropdown feature

I am currently working on creating an HTML email that can display data depending on the selection made from a dropdown menu within the email itself. Despite my research, I have not come across a suitable solution for this specific scenario. My current app ...