Creating a hover-activated dropdown menu using only CSS

How can I create a dropdown on hover without the issue of link clicks racing against the hover effect?

.dropdown:hover > .dropdown-menu
{
    display: block;
}
.dropdown > .dropdown-toggle:active
{
    /*To prevent sticky behavior on clicking*/
    pointer-events: none;
}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
    
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>

  </div>
</nav>

cssbootstrap-4

Answer №1

An issue arises due to a small gap between the button and the dropdown menu.

To resolve this, you can eliminate the gap by adjusting the top margin on .dropdown-menu:

.dropdown-menu {
    margin-top: 0;
}

Alternatively, if you prefer to maintain the current menu positioning, you could employ a hidden pseudo element to restrict the cursor from moving beyond the button's boundaries when transitioning to the menu.

I have highlighted the pseudo element in red here to demonstrate how it fills the gap, but in actuality, you would set this to transparent.

This issue is specifically noticeable on larger viewports, hence the media query will prevent the pseudo element from displaying on mobile screens.

Utilize the "Full page" button:

.dropdown:hover > .dropdown-menu
{
    display: block;
}
.dropdown > .dropdown-toggle:active
{
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

@media (min-width: 992px) {
  .dropdown:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;

    background: red;
  }
}
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
    
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>

  </div>
</nav>

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

Using Inline Styling to Showcase a Background Image in a REACTJS Component

import React from 'react'; import Slick from 'react-slick'; import style from './Slider.module.css'; import {Link} from 'react-router-dom'; const SliderTemplates = (props) => { let template = null; const ...

javascriptcssreactjs

HTML element resizing unexpectedly due to browser interactions

I recently created a sleek HTML transparent header bar using the following CSS: #head-bar{ position:fixed; top: 0px; width:100%; left:0px; min-height:25%; z-index:2; background-color:#000; background: rgba(0, 0, 0, 0.5); } ...

javascriptjqueryhtmlcss

What is the reason for having two select pickers?

Why do I have two select pickers instead of one? I'm encountering this issue when copying the first row of a table within my JavaScript function and pasting it as a new row upon pressing the "Add" button. There seems to be an issue with the select pic ...

javascripthtmljquerybootstrap-4

Tap on the image to enlarge

I have a question regarding using thumbnails from Bootstrap. I am trying to create functionality where when I click on a thumbnail, the picture with its original sizes appears and then disappears when clicked anywhere else on the page. Below is an exampl ...

javascriptphpcss

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

What could be causing the content to disappear when switching from flex: column to flex: row?

In the code snippet provided below, you may notice that when the screen size is less than 768px, the video and content underneath it are visible. However, as soon as the screen size exceeds 768px, the video disappears. Have you ever wondered why the video ...

cssflexbox

Is it possible to highlight and copy text while using OrbitControls?

As I work on my Three.js project with OrbitControls.js, I've come across an issue where I am unable to select or highlight any text using OrbitControls. For example, you can try visiting this link: (try selecting the text "orbit control example" at ...

javascriptcssthree.jstextselection

Styling text on a HTML webpage

Is there a way to center text in the caption and add a link on the far-right of the caption? Let me know if this is possible. The format for the caption should be: Centered Text Right-justified link ...

htmlcss

Looking to enhance the style and appearance of your REACT App? Consider incorporating tools like Boostrap CDN, React-bootstrap, MDBoostrap, or any other styling options available. These can

I am relatively new to Frontend development and I am eager to create a visually appealing APP using the MERN Stack. I have recently started working on developing with REACT JS. In order to enhance the styling of my project, I considered importing the CDN ...

cssreactjsbootstrap-4react-bootstrapbootstrap-material-design

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Check out my website at I have incorporated the Easy Slider 1.7 plugin from this source and made some custom JavaScript modifications for a banner rotator. The issue I am facing is that on webkit browsers, the navigation links (1,2,3,4,5) on the banner a ...

htmlcssgoogle-chromesafariwebkit

Bootstrap 3 Full-Width Responsive Image Overlapping

I have designed a grid layout with col-md-7 on the left side and col-md-5 on the right side. The images in the col-md-5 are responsive and have a full-width of col-md-12. <div class="container"> <div class="row"> <div class="col ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for removing the highlighted border from a navigation menu in ASP.NET?

I am currently utilizing the navigation menu in the ASP.NET toolbox, but I am struggling to remove an unwanted golden border. Despite my efforts, I have not been able to find any information on how to resolve this issue. The golden border only appears when ...

asp.netcsshighlightnavigationbar

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

Having trouble echoing this PHP code due to issues with single quotes, causing the HTML to end prematurely. Any suggestions on how to fix this? function button($conn){ $sql = "SELECT * FROM table"; $result= mysqli_query($conn, $sql); while($r ...

javascriptphphtmlcss

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

htmlcssangularjsangular-material

Bring fontawesome into the Laravel environment with MDBVue integration

I attempted to integrate fontawesome into my laravel mdbvue setup. Upon installing mdbvue using the command: npm install mdbvue fontawesome was automatically added to my package-lock.json and can be found in the node_modules folder under @fortawesome. ...

csslaravelvue.jsimport

Multiple Class Changing Effects: Hover, Fade, Toggle

I have a simple yet complex problem that I am trying to solve. I want to create links that fade in upon mouseover and fade out when the mouse moves away. Simultaneously, I want an image to slide in from the left while hovering over the links. I have manage ...

javascriptjqueryhtmlcssjquery-ui

Adding new divisions to an already existing division with angled borders

I am currently attempting to create a header similar to the one displayed in the attached image. Despite trying various solutions found on this platform, I have not been able to achieve the desired result. I have managed to work out the text and logo eleme ...

javascripthtmlcssimage

Displaying Images Beside Top Category Names in Magento

Is there a way to add small images next to the names in my top navigation menu? Here is an example of what I am looking for: Category1Name small_img | Category2Name small_img2 | Category3Name small_img3 Thank you EDIT: Below is the HTML code extracte ...

phphtmlcssmagentocategories

Center navigation bar text with the class `.justify-content-center`:

Can someone explain why, when I add the class justify-content-center to my Navbar in Bootstrap, the text remains in the left position? https://i.sstatic.net/8x0Yc.png I came across an instruction in the Bootstrap documentation stating that after adding t ...

htmlcsstwitter-bootstrapbootstrap-4navbar