Menu collapse alignment upon hovering

I've spent over an hour grappling with this problem and can't seem to find a solution.

Whenever the navigation menu collapses and I hover my mouse over the SHOP item, it shifts the SHOP element to the left. When I move the cursor away, it returns to its central position. The SHOP should remain aligned with the other two menus (without moving left).

I've tried adjusting the dropdown-menu class and CSS for the dropdown, but nothing seems to work.

Any guidance in the right direction would be greatly appreciated. Thank you

HTML:

      <div class="collapse navbar-collapse nav-layout" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="index">HOME</a>
          </li>             
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle"dropdown" aria-haspopup="true" aria-expanded"false">SHOP</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="products">Tealights</a>
                  <a class="dropdown-item" href="products">Wax-Melts<span class="sr-only">(current)</span></a>
                  <a class="dropdown-item" href="products">Medium Candle</a>
                  <a class="dropdown-item" href="products">Large Candle</a>
                  <a class="dropdown-item" href="products">X-Large Candle</a>
                </div>
            </li>
            <li>
              <a class="nav-link" href="contact">CONTACT</a>
            </li>
        </ul>
      </div>
    </nav>

CSS:

.narbar-default .navbar-nav > li.dropdown:hover > a,
.narbar-default .navbar-nav > li.dropdown:hover > a:hover,
.narbar-default .navbar-nav > li.dropdown:hover > a:focus, {
    color: rgb(100, 100, 100);
}
.dropdown:hover > .dropdown-menu {
    display: block;
    background-color: #909090;
}

Screenshot displaying SHOP dropdown issue when hovered over

Answer №1

To make the dropdown menu appear correctly, ensure that you include the position:absolute property in the dropdown-menu selector. Here is the recommended code snippet:

.dropdown {
    position: relative;
}
.dropdown > .dropdown-menu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 2;
}

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

Sending Input to SQL DataBase Using C# and HTML

I need to execute a C# function when a button is clicked that captures a rating (1-7) and saves it to a database along with a text input. Here is the feedback section: <asp:PlaceHolder ID="AnswersPlaceholder" runat="server" Visible="false"> <asp ...

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

Ensure that the <td> element remains within the confines of the window

When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted. Next, I ex ...

What is the best way to choose an HTML element based on the attributes of its child nodes in CSS?

Take this scenario for instance: <tr> <td align="center">123</td> <td class="someclass">abc</td> </tr> My goal is to target all <tr> elements that contain a <td> with the class attribute set to someclass. ...

iOS SDK - The Ultimate Tool to Unlock HTML 5 Player

Currently, I am facing a challenge while using Hpple to extract links from webpages. Due to the lack of support for Flash on iOS, I have to resort to the HTML 5 player. My objective is to locate and access this player. In scenarios where the website loads ...

Error in jQuery submenu positioning issue

I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right. Here is an example: <ul class="menuFirst"> <li><im ...

What causes jquery to not trigger PHP when the HTML file resides in a different location?

In my project structure, I have a 'js' folder containing the jQuery function and a PHP script. The HTML file is located in a separate folder. Currently, the setup looks like this: /server/js/global.js /server/js/script.php /server/html/stude ...

Why are the CSS files not being compiled in Rails' application.scss?

After spending the last 3 hours working hard to include my CSS files in the vendor/stylesheet/ directory in application.scss, I'm still not having any luck. The path to the CSS files is: vendor/assets/stylesheets/ Here is my code in Application.scs ...

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

What is the method for configuring the asp-for input tag helper to create camelCase names?

My view model is structured as follows: public class MyModel{ public DateTime? StartDate {get;set;} } When using an input tag on a view with the asp-for tag helper, the default HTML generated looks like this: <input type="datetime" id="StartD ...

A hobby project involving the creation of a webmail app using a combination of PHP

As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...

The challenge of resizing images using Chrome Print CSS

I have a unique method for centering an oversized image within its container. Everything works flawlessly, except when attempting to print in Chrome (printing in FF and IE behaves as expected). In Chrome's print preview, the image does not resize at a ...

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

What is the reason behind H1 tags not requiring a class or ID in CSS?

As I was reviewing my CSS code, I noticed that the h1 tag is defined like this: h1 { .... } Unlike everything else in my code, which either has an id "#" or a "." class preceding it. This made me wonder why header tags don't require this. Could it b ...

Angular animations do not seem to be functioning properly with ng-show when changing the class using ng-class

I need assistance in creating a slider for a list of objects using ng-show and animations. The current setup works smoothly when the objects slide in one direction. However, I am facing issues when trying to implement the functionality for users to slide ...

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

Is there a way to only refresh the div specifically for the calendar with an id of "

$(document).ready(function() { $("#client-list").on("change", function() { var selectedValue = $(this).val(); location.reload(); }); }); Is there a way to refresh only the div with id='calendar' without refreshing the entire pa ...

ng-table Filtering with dropdown selection

Hello, I am currently working on creating a Ng-table with a select dropdown menu for filtering the results. Here is where I am at so far. 1) How can I remove one of the pagination options that appear after applying the filter? I only want to keep one pagi ...

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

Update the screen layout to a grid when the screen is resized

I have a very specific request regarding the user experience. I want to display four links within a container, positioned next to each other in one row with a vertical line separating them. For example: Link one | Link two | Link three | Link four This ...