Is the dropdown menu causing issues with the rest of the navigation bar?

While attempting to create my website, I encountered some challenges with the dropdown menu.

After following a tutorial on YouTube and making some modifications myself, there seems to be an issue. The screenshot below illustrates that it pulls down the rest of the navigation bar (Home and Contact Us), which was not my original intention.

https://i.sstatic.net/CwkpH.png

I have experimented with different solutions, but this is the closest I have gotten so far.

HTML

<div class="navigation">
        <ul>
            <li><a>&#9776;</a>
                <ul>
                    <li><a href="#">example1</a></li>
                    <li><a href="#">example2</a></li>
                </ul>
            </li>
            <li><a href="index.html">Home</a></li>
            <li><a href="contactpage.html">Contact us</a></li>  
        </ul>
    </div>

CSS

.navigation ul{ 
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9); 

.navigation ul{ 
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9); 

.navigation ul li{
display: inline;
padding: 0px 10px 0px 0px;
list-style-type: none;

.navigation ul li a {
/*display: block;*/
padding: 10px 0px;
text-decoration: none;
color: #E5E4E2;

.navigation ul li ul {
display: none;
width: 130px;
background: rgba(53, 57, 53,0.9);

.navigation ul li:hover ul{
display: block;


.navigation ul li ul li {
float: left;

.navigation ul li ul li a{
padding: ;

.navigation ul li ul li a:hover {
color: #AFE1AF;

.navigation ul li a:hover{
color: #AFE1AF;
htmlcss

Answer №1

If you assign "position: absolute" to the "dropdown" element and use a "class", it will enhance readability and styling of the element

.navigation ul{ 
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9); 
}
.navigation ul{ 
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9); 
}
.navigation ul li{
display: inline;
padding: 0px 10px 0px 0px;
list-style-type: none;
}

.navigation ul li a {
/*display: block;*/
padding: 10px 0px;
text-decoration: none;
color: #E5E4E2;
}
.navigation ul li ul {
display: none;
width: 130px;
background: rgba(53, 57, 53,0.9);
}
.navigation ul li:hover ul{
display: block;
}

.navigation ul li ul li {
float: left;
}
.navigation ul li ul li a{
}
.navigation ul li ul li a:hover {
color: #AFE1AF;
}
.navigation ul li a:hover{
color: #AFE1AF;
}
.dropdown{
  position: absolute;
}
<div class="navigation">
      <ul>
          <li><a>&#9776;</a>
              <ul class="dropdown">
                  <li><a href="#">example1</a></li>
                  <li><a href="#">example2</a></li>
              </ul>
          </li>
          <li><a href="index.html">Home</a></li>
          <li><a href="contactpage.html">Contact us</a></li>  
      </ul>
  </div>

Answer №2

The issue lies in the positioning of div.navigation > ul > li > ul as static, causing disruption in rendering flow. By setting the parent to position:relative and the element to position: absolute, it prevents pushing other navbar elements down. I've included specific classes to highlight these changes.

For more information, refer to this link

Check out the revised CSS below:

.navigation ul {
  width: 100%;
  height: 25px;
  margin: 0;
  padding: 10px 120px;
  background: rgba(53, 57, 53, 0.9);
}

.navigation ul {
  width: 100%;
  height: 25px;
  margin: 0;
  padding: 10px 120px;
  background: rgba(53, 57, 53, 0.9);
}

.navigation ul li {
  display: inline;
  padding: 0px 10px 0px 0px;
  list-style-type: none;
}

.navigation ul li a {
  /*display: block;*/
  padding: 10px 0px;
  text-decoration: none;
  color: #E5E4E2;
}

.navigation ul li ul {
  display: none;
  width: 130px;
  background: rgba(53, 57, 53, 0.9);
}

.mainmenu {
  position: relative;
  cursor: pointer;
}

.submenu {
  position: absolute;
  top: 1.5rem;
}

.navigation ul li:hover ul {
  display: block;
}

.navigation ul li ul li {
  float: left;
}

.navigation ul li ul li a {
  padding: 0;
}

.navigation ul li ul li a:hover {
  color: #AFE1AF;
}

.navigation ul li a:hover {
  color: #AFE1AF;
}
<div class="navigation">
  <ul>
    <li class="mainmenu"><a>&#9776;</a>
      <ul class="submenu">
        <li><a href="#">example1</a></li>
        <li><a href="#">example2</a></li>
      </ul>
    </li>
    <li><a href="index.html">Home</a></li>
    <li><a href="contactpage.html">Contact us</a></li>
  </ul>
</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

Navigating with Anchors, Styling and jQuery

Firstly: Apologies in advance for any language errors as English is not my native tongue. :) The Scenario Here's the deal: I'm attempting to create a single button that, when clicked by the user, automatically scrolls down to the next DIV. Each ...

javascriptjqueryhtmlcss

Issues with CSS overlays arise when attempting to display a welcome page on top of a flash component

Can anyone help with fixing the issue of my overlay being hidden behind the flash element? The blue bar with the 'Continue' button still shows up on top. I need some CSS changes to make sure that the overlay appears above everything else below it ...

htmlcssflashiframe

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

javascripthtmljsonhtml5-canvasfabricjs

Create a full-page gradient background using CSS that spans the entire height of the

I need assistance with a website that features a gradient implemented through CSS like this: #grad { background: -webkit-linear-gradient(#87a0b4 80%, #6b88a1); background: -o-linear-gradient(#87a0b4 80%, #6b88a1); background: -moz-linear-gradi ...

htmlcssgradient

Displaying the contents of all files within a directory on a webpage by utilizing AJAX and JQuery

Scenario: Within my server, there exists a directory housing various log files. My objective is to exhibit all these files on a single webpage in a sequential list, with the most recent log positioned at the bottom. These logs are generated externally (ou ...

jqueryhtmlajax

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

javascripthtmlcssangular

Excessive whitespace bordering the perimeter of the webpage

I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margi ...

htmlcss

Learn how to separate two SCSS files and compile them into individual CSS files

Currently, I have two SCSS files that need to be compiled into separate CSS files. For one of the SCSS files, my script looks like this: "watch:sass": "node-sass assets/stylesheets/custom.scss assets/stylesheets/custom.css -w", "compile:sass": "node-sass ...

cssnpmsasscompilationwatch

Steps to incorporate a session into an HTML login form

Need assistance with adding a session to my HTML form connected to MySQL database. The database updates whenever the page is reloaded or when a failed submission occurs. Can anyone provide a solution for this? <body> <?php // define variables a ...

phphtmlsession

The alignment of columns in the fixed header table is off since it does not contain the necessary <thead> and <tbody> elements

On my page, I have three tables, with one of them containing a large amount of data. To make it easier to read, I decided to have a fixed header for the table. However, I am facing an issue where the columns in the thead (header) and tbody (body) are not a ...

htmlcss

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

JavaScript is throwing an error when clicking on functions and managing the z-index property

I am experiencing difficulties with my website code. I have defined all the necessary functions and CSS, but I keep encountering errors such as "clicked is not defined," even though it is clearly present in the script. The goal of the code is to bring the ...

javascripthtml

Tips for sending a Python email with attachment and including an HTML body along with an alternative plain text body

Using Python, I have developed code to send emails with HTML bodies and attachments. Additionally, I would like to include a plain text email body for clients that cannot display HTML content properly. While my code works in most cases, I've encounter ...

pythonhtmlemailtextattachment

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

What could be causing the malfunction in one of the functions within my JavaScript code?

As a JavaScript beginner, I am currently working on creating a To-do App with JavaScript. Most of the functions are functioning perfectly except for one called doneTask at line 36. Despite numerous attempts to identify the issue, I have been unsuccessful s ...

javascripthtmlcss

Sorry, we couldn't find the page you were looking for. The request method used was GET and the request URL was http://127.0.0.1:

I've previously reported this error without success, so I'm providing more details now. I am new to coding and recently started a Django & Python project, but encountered some issues. Despite three weeks of troubleshooting, the problems persist. ...

pythonhtmldjangodjango-models

What is a way to increase the boldness of an HTML anchor tag when hovering without using CSS, but by modifying the inline style?

Is it possible to make the following anchor tags appear bolder on hover using inline styles, without utilizing any external or embedded CSS file? <a href="https://en.wikipedia.org/wiki/Internet_of_Things" target="_blank">Internet of things<br& ...

htmlhover

setting different iframe widths for desktop and mobile views

I am working with an iframe and facing a challenge. I want to make it full screen width on mobile devices, but only half the screen width on a normal monitor (100% and 50%, respectively). The minimum specification for the mobile device would be iPhone, alt ...

htmlcss

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

My webpage has a fixed title bar with a high z-index that overlaps all other elements on the page when they are scrolled up, except for the dynamically created table cells. What attributes or styles do I need to set in order to hide the table cells behin ...

htmlcss