Ways to narrow the space separating the dropdown menu and menu item

I am currently facing an issue with a dropdown menu I am trying to create using just CSS. When I hover over the hamburger symbol, there seems to be a gap between the symbol and the menu item. How can I eliminate this gap by implementing professional-level code using only CSS? I want to achieve this without resorting to Flexbox or Grid.

Can you help me troubleshoot and solve this problem?

Here is the snippet of my current code:

/* ############################## START GLOBAL SETTINGS ############################## */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 62.5%;
}

ul {
  margin: 0;
  padding: 0;
}


/* ############################## END GLOBAL SETTINGS ############################## */


/* ############################## START GENERAL SETTINGS ############################## */

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
... (rest of CSS code) ... 

</nav>

htmlcssdrop-down-menu

Answer №1

If you're looking for a quick solution, one option could be to adjust the .mobile-nav-content { CSS code by changing the top value to 40px instead of its current 50px. However, this may not fully resolve your issue.

The problem lies in the fact that the dropdown menu only shows when hovering over the burger menu. Even if you reposition the dropdown to align with the burger menu, the hover event is lost as soon as you move your cursor away from the burger menu and onto the dropdown itself.

An effective approach would be to base the hover event on a common ancestor to both the trigger element (the burger menu) and the dropdown. This way, hovering over either component would satisfy the hover condition.

.menu-bar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #c0c0c0;
}

.drop-holder {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.burger-menu {
    margin: 10px 10px 0;
    width: 30px;
    height: 30px;
    background-color: #222;
}

.dropdown {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 50px 0 0;
    list-style: none;
}

.dropdown li {
    width: 200px;
    background-color: #c0c0c0;
}

.drop-holder:hover .dropdown {
    display: block
}
<div class="menu-bar">
    <div class="drop-holder">
        <div class="burger-menu"></div>
        <ul class="dropdown">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
        </ul>
    </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 apply multiple text shadows to a single piece of text using the jQuery ".css()" method?

Is it possible to create multiple text shadows for a single piece of text using the jQuery ".css()" method? I'm currently working on animating the title of a page on my website, which includes adding a 3D effect with multiple shadows. I also want to ...

javascriptjqueryhtmlcssonload

Optimizing NGINX with nested location configurations

I have been working on configuring nginx for a small static "web hosting" setup for a selection of products. Despite my efforts to set up nested locations in nginx, I am encountering errors. Here is my location configuration: location /pets { index ind ...

htmlnginxstatic

What is preventing me from setting a background image in Angular 13?

Trying a different approach based on advice from Stack Overflow, I attempted the following: <div [style.background-image]="'url(https://picsum.photos/200)'"></div> Unfortunately, this resulted in no effect and the image was ...

htmlcssangularimage

Using jQuery to extract a specific portion of a URL path

Seeking assistance with extracting category information from lengthy URLs and assigning it to a variable. Consider the following URL: http://example.com/community/home/whatever.html The goal is to assign the variable to the folder path that follows /hom ...

javascriptjqueryhtmlregex

What is the best way to automatically redirect to a different page once a video has finished playing after 10 seconds?

I'm working on creating an HTML page that will automatically redirect after 10 seconds once a video has finished playing. The issue I'm facing is that the page is currently redirecting as soon as it loads, rather than waiting for the video to fin ...

javascripthtmljqueryhttp-redirecthtml5-video

Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...

twitter-bootstrapcssbootstrap-4css-transitions

Determining the margin-left value of a centrally positioned table

I have a table with variable columns, meaning the columns of the table are dynamic. The number of columns will keep changing, causing the table to be centralized and the margin-left value to adjust accordingly. Now, I need to calculate the margin-left val ...

jquerycssruby-on-railstabularwicked-pdf

Display a loading image as a placeholder while the Block is loading on the Viewport

Despite my extensive search for a solution to my problem, I have been unable to find one that addresses it directly. I am trying to display a "loading" image for 4 seconds before the content of the div is loaded. Unfortunately, I haven't been able to ...

javascriptjqueryhtmlviewport

Load a certain script when another one is not accessible

In my index.html file, I have a script linked using <script src="..."></script> to be executed after the page loads. However, there are times when this script may not be available. In such situations, the client should load and execut ...

javascripthtml

What is the process for displaying the current bitcoin price on an HTML page using API integration?

I'm looking to develop an application that can display the current Bitcoin price by fetching data from the API at . I want to showcase this information within an h2 element. Any suggestions on how I could achieve this? Thank you in advance. const e ...

javascripthtmlapiexpressbitcoin

JavaScript: When setting focus on a DOM element, the document.activeElement is not automatically updated

I am facing an issue where I need to manually set focus on two buttons consecutively. These buttons are jQuery-Objects stored in an array named pMenus. Below is the code snippet: function OpenSubMenus(pMenus) { pMenus[pMenus.length - 1].get(0).focus() ...

javascripthtmlfocus

Guide on Attaching Information to an ASP.NET ListBox Component

Is there a way to connect data stored in a database to a ListBox control on an ASP.NET platform? ...

asp.netdatabasedata-bindingdrop-down-menu

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Instruction on updating the browser URL from navigating within an iframe

Is it possible to change the URL in the browser based on iframe navigation like this: **[URL at navigator: http://localhost/]** <html> <body> <iframe src="http://localhost/?loadiframe=true"> <!-- this is at the code retrieved by t ...

javascriptjqueryhtmlurliframe

JavaScript allows for the manipulation of elements within a webpage, which includes accessing elements from one

There is a file that contains a fragment for the navbar. The idea is to have listItems in the navbar, and upon clicking on those listItems, another subnavigationbar should open below it. Below is the code I currently have: <!DOCTYPE html> <html x ...

javascripthtmlcssbootstrap-5

How to incorporate a collection of additional entities into an existing entity in a Database/PHP design?

Allow me to pose a database design query. As someone new to PHP and diving into my first database course, I'm grappling with the best approach to bring my idea to life. The project at hand is a membership database comprising of 'members' an ...

phphtmlmysql

Prevent the rendering of HTML in the combobox dropdown menu

Utilizing ExtJs 3.1 In my Ext.form.ComboBox, the store includes values such as: "value1", "<value2>", "value3". The issue arises when the combobox dropdown list is displayed, and "<value2>" is being interpreted as an HTML tag. This is causing ...

htmlcomboboxextjs

Unable to play GSM extension files on a web browser due to compatibility issues

I've been attempting to play an audio file with a (.gsm) extension using <audio>, object tags, and JavaScript. <script> var myAudio = new Audio(); // creating the audio object myAudio.src = "test.gsm"; // assigning the audio file t ...

javascripthtmlaudio

Issues with boxes showing or concealing depending on the chosen option

I am encountering an issue with a dynamic dropdown feature. The secondary box is supposed to appear based on the selection of the first box. However, as soon as I select an option in the second box, it disappears immediately. I suspect the problem lies wit ...

javascripthtmlcssdynamic

"Choosing the text within an <a> tag: A step-by

I am dealing with the a tag. <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c7dbd9d1f4d9d5ddd89ad7dbd9">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

htmlcsswebkit