What steps can I take to address the issue of my dropdown menu items overlapping each other on

Despite numerous challenges, I finally succeeded in getting my dropdown buttons positioned at the top of the screen, fitting into the navbar, and aligning next to each other. However, the dropdown menus now overlap each other and both drop below the "About Us" section instead of below their respective buttons.

You can view a screenshot of my site for reference.

#headbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 2;
    border: 2px black solid;
    display: inline;
    background-color: #ff0000;
}

#logo {
  display: inline;
  height: 50px;
  width: 50px;
  border: none;
}

#title {
    display: inline;
    text-align: center;
    font-size: 20px;
    min-width: 100%;
    border: 2px solid black;
}

.button-container {
    display: flex;
    left: 190px;
    min-width: 100%;
    min-height: 50px;
    border: 2px solid black;
    top: 0;
    position: absolute;
}

#button-1 {
  background-color: red;
  color: white;
  padding: 15px 10px 15px 10px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
}

#button-2 {
  background-color: red;
  color: white;
  padding: 15px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
  left: 100px;
}

  .dropdown {
    position: absolute;
    display: inline-block;
  }
.dropdown-content a {
color: white;
padding: 8px 10px;
text-decoration: none;
display: block;
}
  
.dropdown-content a:hover {
background-color: #ff0000;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #ff0000;
}
<nav id="navbar">
<header id="headbar">
   <h1 id="title">DAILY</h1><img id="logo" src="https://i.ibb.co/C7wkQsw/DB-Logo.png" alt="Daily Bugle Logo"><h1 id="title">BUGLE</h1>
<div class="button-container">
   <div class="dropdown">
      <button class="dropbtn"  id="button-1">About Us</button>
      <div class="dropdown-content">
         <a class="nav-link" href="#Section_1">What We Are</a>
         <a class="nav-link" href="#Section_2">Journalist Oath</a>
         <a class="nav-link" href="#Section_3">Editors</a>
         <a class="nav-link" href="#Section_4">Writers</a>
         <a class="nav-link" href="#Section_5">Photographers</a>
      </div>
    </div>
    </div>
    <div class="button-container">
    <div class="dropdown">
      <button class="dropbtn" id="button-2">Politics</button>
      <div class="dropdown-content">
         <a class="nav-link" href="#Section_1">Super-Politics</a>
         <a class="nav-link" href="#Section_2">Local</a>
         <a class="nav-link" href="#Section_3">United States</a>
         <a class="nav-link" href="#Section_4">Global</a>
         <a class="nav-link" href="#Section_5">Galactic</a>
      </div>
    </div>
    </div>
</header>
</nav>

Despite spending two hours working on this, my memory is not the best, so I can't recall everything I've tried. I'm unsure what steps to take next to resolve this issue.

htmlcssdrop-down-menudropdownnavbar

Answer №1

If you're just starting out, I suggest diving deeper into html and css with hands-on practice. Let's address some issues together.

As a beginner, it's best to avoid using position: absolute unless you're fully confident in its usage. A great alternative is to leverage display: flex for achieving various layouts and structures.

You may have included unnecessary CSS properties which I've cleaned up, ensuring the alignment of the logo and header through display: flex, align-items: center, and setting margin: 0 to h1. Check out the revised example below. Feel free to ask if you have any questions.

Edited

The issue with dropdown alignments likely stems from using position: absolute without a corresponding position: relative on the parent div. Add position: relative to the .dropdown class to resolve this. I've also provided an updated code snippet below: 

/* Updated CSS Example */
body {
            margin: 0;
            padding: 0;
        }

        .mainDiv {
            color: white;
            width: 100%;
            height: 100vh;
            background-color: #1e1e1e;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #headbar {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            z-index: 2;
            border: 2px black solid;
            background-color: #ff0000;
            /* Newly added */
            display: flex;
        }

        /* Continue with the rest of the CSS properties as required */

        /* End of Updated CSS Example */

<div class="mainDiv">
  <nav id="navbar">

    <!-- Your HTML content goes here -->

  </nav>
</div>

Answer №2

I have successfully addressed all issues in your HTML and CSS. I have also made sure to maintain the original design.

Below is the revised code:

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  border: 2px black solid;
  background-color: #ff0000;
}

#navbar {
  display: flex;
  align-items: center;
}

.logo-title {
  display: flex;
}

#logo {
  height: 50px;
  width: 50px;
  border: none;
}

.title {
  font-size: 20px;
  border: 2px solid black;
  margin: 0;
  display: flex;
  align-items: center;
}

.buttons {
  display: flex;
}

.drop-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: white;
  border: 2px solid black;
  height: 50px;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f68484;
  min-width: 160px;
  box-shadow: 10px 8px 16px 0px black;
  z-index: 1;
  top: 100%;
}

.dropdown-content .nav-link {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
  </head>
  <body>
    <header>
      <nav id="navbar">
        <div class="logo-title">
          <h1 class="title">DAILY</h1>
          <img
            id="logo"
            src="https://i.ibb.co/C7wkQsw/DB-Logo.png"
            alt="Daily Bugle Logo"
          />
          <h1 class="title">BUGLE</h1>
        </div>

        <div class="buttons">
          <div class="dropdown">
            <button class="drop-btn" type="button">
              About Us
            </button>
            <div class="dropdown-content">
              <a class="nav-link" href="#Section_1">What We Are</a>
              <a class="nav-link" href="#Section_2">Journalist Oath</a>
              <a class="nav-link" href="#Section_3">Editors</a>
              <a class="nav-link" href="#Section_4">Writers</a>
              <a class="nav-link" href="#Section_5">Photographers</a>
            </div>
          </div>

          <div class="dropdown">
            <button class="drop-btn" type="button">
              Politics
            </button>
            <div class="dropdown-content">
              <a class="nav-link" href="#Section_1">Super-Politics</a>
              <a class="nav-link" href="#Section_2">Local</a>
              <a class="nav-link" href="#Section_3">United States</a>
              <a class="nav-link" href="#Section_4">Global</a>
              <a class="nav-link" href="#Section_5">Galactic</a>
            </div>
          </div>
        </div>
      </nav>
    </header>
  </body>
</html>

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

Prevent tooltip text from appearing when a button is disabled in an angular application

As a beginner in UI development, I have a requirement for my Angular application. I need to enable and disable a button based on certain conditions. The tricky part is that I want to display a tooltip only when the button is enabled. I have managed to chan ...

javascripthtmlcssangularsyncfusion

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

pythonhtmlbeautifulsoup

The folder could not be located by MAMP

For years, I've relied on MAMP to manage my web development projects. However, after performing a clean install of my Mac recently, I reinstalled MAMP only to encounter issues with it not functioning properly. Upon reinstalling the program and placin ...

phphtmlmysqlapachemamp

How to use jQuery to select an element by using 'this' on a button

I have a total of 5 divs, each containing 5 different texts. <div class="text"> <%= theComment.text %> </div> I am working with node.js, MongoDB, and Mongoose. In addition to the divs, I also have a button labeled EDIT with a cl ...

javascriptjqueryhtmlnode.jsmongodb

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Adjust padding for smaller devices in React using Material UI

In my grid layout, I have columns set to 3,6,3 and a spacing of 3 between them. On larger screens, the spacing between grids looks fine. However, as the screen size decreases, the spacing remains the same which is not visually appealing. What I am aiming ...

cssreactjsmaterial-ui

What causes HTML validator errors in all head meta-tags?

After running my HTML through a validator, I was shocked to discover around 80 errors even though the site appeared to be functioning properly. Here is an excerpt of the code: <!DOCTYPE html> <html lang="da-DK"> <head> <meta charset=" ...

htmlvalidation

Tips for steering clear of dragging and dropping layers

Currently, I am utilizing the drag and drop functions from w3schools to implement a drag and drop feature. For better comprehension, you can take a look at my code: http://codepen.io/TutTut/pen/qIGkD I have noticed that when dropping one term onto anothe ...

jqueryhtmldrag-and-drop

Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

This is a demonstration of the CodePen project: Click here to view <div class="annotation"> <div class="annotext"> <div class=annobar></div> <div class="x">✕</div> Lorem ipsum dolor sit amet, consectetur adipiscing e ...

htmlcssblock

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

htmlcssheight

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

htmlcsscss-floatopacity

Is there a way to dynamically set the width in CSS based on the width of characters used?

The value of rem is based on font height. Therefore, when setting width in rem for layout or media query purposes, it is determined by the height of the characters, not the width. I believe this may not be ideal for creating layouts. ...

css

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

I am looking to evenly space several sidebar blocks throughout a lengthy post. To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly. Check out Code Pen: http://cod ...

htmlcsssassflexbox

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

asp.nethtmlcssbuttonwebforms

Media queries for Tailwind CSS in a Node JS application do not function properly when viewed on a mobile device

I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...

cssnode.jsmedia-queriestailwind-cssejs

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

javascriptcssreactjsmaterial-ui

Having trouble getting AngularJS ng-repeat to work with Semantic UI dropdown feature

Check out this Plunker for the issue in question: https://plnkr.co/edit/YeOJjf6AZyJ7hAfpFfsK?p=preview In the provided Plunker, it is evident that the color dropdown functions correctly, whereas the shape dropdown does not. The assumption is that this dis ...

angularjsangularjs-ng-repeatdropdownsemantic-ui

avoid inserting into a specific field with a specific name

I am trying to add a picture next to a specific name, but I am facing issues as there is no option for inserting it. This is how my table looks: https://i.sstatic.net/RRaTb.png How can I insert a picture in front of a particular name? The content of my ...

javascriptphphtmlcssajax

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

javascripthtmlcss