Guide to adjusting the position of a dropdown menu within a navigation bar

ANSWER BELOW

HTML:

<div class = "navbar">
    <a href = "index.php">NON-HOVER</a>
<div class="dropdown">
    <a href = "index.php">HOVER</a>
        <div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

CSS:

.navbar {
    overflow: visible;
    background-color: #A10800;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar a:hover {
    background: #D1281F;
    text-decoration: underline; 
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 8px;
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

Explanation:

To create a Navbar with a non-overlapping Dropdown below the "HOVER" bar, while keeping both elements clickable and visible on hover, we need to adjust the CSS positioning of the dropdown content. By setting its position to absolute and ensuring it displays under the hovered item, we can achieve the desired effect.

Here is an improved illustration of the issue:

No hover scenario

Hover over "HOVER"

htmlcssnavbardropdown

Answer №1

Ensure the .dropdown element has its overflow set to visible so that the dropdown menu is visible even when it extends beyond the container. Set the .dropdown element's position to relative and adjust the .dropdown-content by setting its top property to 100%, which will shift it down by the height of the .dropdown element.

.navbar {
    overflow: visible;
    background-color: #A10800;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar a:hover {
    background: #D1281F;
    text-decoration: underline; 
}
.dropdown {
  float: left;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 8px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
<div class = "navbar">
    <a href = "index.php">NON-HOVER</a>
<div class="dropdown">
    <a href = "index.php">HOVER</a>
        <div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

Answer №2

.navigation-bar {
        overflow: visible;
        background-color: #A10800;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: left;
    }
    .navigation-bar a:hover {
        background: #D1281F;
        text-decoration: underline; 
    }
    /*.dropdown {
      float: left;
      overflow: hidden;
    }*/
    .drop-down-content {
      display: none;
      position: absolute;
      top: 100%;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown:hover .drop-down-content {
      display: block;
    }
<div class = "navigation-bar">
  <a href = "index.php">NO-HOVER</a>
  <div class="dropdown">
    <a href = "index.php">HOVER</a>
    <div class="drop-down-content">
      <a href = "index.php">DROPDOWN</a>
    </div>
  </div>
</div>

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

What is the best way to align the menu to the center

Hey there, I'm trying to center a dropdown menu in a 970px wide div. No matter what I do, I can't seem to get it to work correctly. <div id="menuwrapper"> <ul class="menu" id="menu"> <li><a href="#" >Home</ ...

htmlcssmenu

What is the best way to adjust the sizes of two images within the same class to your liking?

My class called cbImage has a fixed CSS for all images. .cbImage img { width: 100%; height: 100%; } However, I don't want all images to have the same width and height. Is there a way to change the width and height of different images as need ...

javascripthtmlcss

Creating a line that extends from the left side of the viewport to the full length of an element within a bootstrap column

I'm currently working on creating a title that has a unique design: https://i.sstatic.net/VhEBQ.png The design requires a horizontal line to start from the left side of the viewport and end at the same point where the title ends. I am aiming to keep ...

htmlcssbootstrap-5

Is there a way to position my input at the bottom of its parent element?

Is there a way to position this input element at the bottom and center of its parent div? https://i.sstatic.net/gs1yP.jpg ...

csshtml

Guide on removing an item from a list using a JavaScript button

I am in the process of creating a basic task list that allows users to input tasks. When the add button is clicked, the task will be added to an unordered list along with a delete button. As a beginner in JavaScript, I am struggling to figure out how to ma ...

javascripthtmlcss

Struggling to figure out how to properly shuffle my deck of cards array in JavaScript. Can't seem to grasp how to pass the array correctly

Currently, I am engrossed in my personal project and watching tutorials just for the fun of it. My goal is to create a game for my school project which is inspired by a war card game that I used to play as a child - where the highest number wins. I have ...

javascripthtmlcss

Creating a clickable color-changing grid: A step-by-step guide

In a grid of size 12 by 12, each corner will be clickable, selecting a 6x3 cell area starting from the corner. The selected cells will change color upon clicking any of the 4 corners. After selecting one corner, the remaining cells (126 cells) will be che ...

javascripthtmlhtml5-canvas

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

cssangularsass

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

htmlcssselenium

Angular Update Component on Input ChangeEnsuring that the component is automatically

<div class=" card-body"> <div class="row"> <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active" *ngFor="let subject of subjects"> <div class=" fon ...

htmlangulartypescript

What is the best way to show a left and right arrow on a mobile website page?

I'm experiencing a strange issue with my webpage, specifically a post in Wordpress. When I try to insert the left right arrow character (U+2194) either by copying from a character map or using the html code, I end up with an icon instead of the actual ...

htmlmobile-safarimobile-chrome

How can you stop text in a textarea from spilling over into the padding?

When I add padding to a textarea element and type more than four lines of content, the content overflows into the padding. Is there a way to prevent this? I have looked at the suggestions in this thread and this one (specifically for google-chrome), but t ...

htmlcss

Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class. I can't include all the code here, so here's a sn ...

htmlcssbootstrap-4

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

javascripthtmldynamics-crm

Searching for the identification of the Object name or id that has been clicked within a Canvas Element

Within a <canvas> element, I have incorporated two images. var ctx = document.getElementById('canvas').getContext('2d'); var img1 = new Image(); img1.src = 'cloud.jpg'; img1.name = "Image 1"; img1.onload = function() { ...

javascripthtmlcanvas

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Recently starting out with javascript and Cordova, I decided to develop a basic GPS app in Visual Studio 2015. The goal was simple: get my current position by clicking on the "CURRENT POSITION" button. Testing it in Firefox yielded positive results. Howev ...

javascripthtmlwindowscordovageolocation

Creating a webpage that loads directly to a specific section of content

After searching online, I couldn't find the solution I was looking for. My goal is to have the visible part of the page load halfway down the actual page. This way, when users visit the site, they can immediately scroll up to see more content. I hope ...

javascripthtml

Error: ExpressJs cannot locate the requested CSS file

Currently, I am delving into the world of expressJS and nodeJS in an effort to expand my skills. However, I've hit a bump in the road when the server fails to locate the CSS file (resulting in a 404 error) upon loading the HTML page. Surprisingly, the ...

cssnode.jsexpressnpm

Delete the following td when the mouse hovers over it

How can I modify my code to remove the next td on mouseenter of a particular td? Currently, my code is removing the first occurrence of mouseenter on any td and the current mouseover td. Here is the snippet of my code. Can anyone help me identify what&apos ...

jqueryhtml

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4