Html Question posted in
Some basic documentation can be found here.

Html – Dropdown content, need to make bigger hover content

I have an problem with my navigation dropdown content, I have made my "box" for the dropdown,
which is active while hovering the item, but I want to content to be a little bit lower from the text
as it’s too close to the navigation dropdown button, but it makes me some issues – I cannot get my mouse to the content,
because it’s disappearing and I need to make the "hover content" a bigger or something like that.

Code:

<!DOCTYPE html>
<html>
  <head>
    <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
      * {
        background-color: #000;
        color: #fff;
      }

      .dropdown:hover .dropdown-menu {
        display: block;
        /* The issue is here if i change margin-top from 0px to 15px */
        /* I have found an answer on stackoverflow, where dude told to make a new */
        /* div with style="margin-top: 20px;", but now I have blank content */
        /* That's the thing I did before that looked right -> margin-top: 15px; */
        margin-top: 15px;
        opacity: 1;
        visibility: visible;
      }

      .dropdown .dropdown-menu {
        display: none;
        opacity: 0;
      }

      .dropdown-menu {
        background-color: #000;
        width: 250px;
        padding: 10px;
        border: 1px solid rgb(53, 53, 53);
      }

      .dropdown-menu .dropdown-item {
        margin-bottom: 10px;
      }

      .dropdown-menu .dropdown-item:last-child {
        margin-bottom: 0;
      }

      .dropdown-menu .dropdown-item:hover,
      .dropdown-menu .dropdown-item:focus {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <li class="px-2 dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Developers
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <!--<div style="margin-top: 20px;">-->
          <a class="dropdown-item" href="#">Documentation</a>
        </div>
      </div>
    </li>
  </body>
</html>

I have tried making the "hover content" bigger, but failed so many times.
That is the reason I’m creating this topic.

Notice: Don’t look at the background color changes, I was just experimenting with something.

The issue is here if i change margin-top from 0px to 15px
I have found an answer on stackoverflow, where dude told to make a new
div with style="margin-top: 20px;", but now I have blank content
That’s the thing I did before that looked right -> .dropdown-menu { margin-top: 15px; }

The image that works correctly but has blank content

But after adding the div with style="margin-top: 20px;" there is just blank content, but it works right. I need to get rid of this blank content to make it look like before with .dropdown-menu margin-top styling.

It currently looks like this after adding the styled div:
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you, @Muhammad Hassan Ashraf for your answer, but this doesn't fix my issue. I still cannot make the gap bigger between the "Developers" text and dropdown content. I see that it doesn't disappear but I haven't noticed a change in the gap, the gap has to be like 2x bigger. Modifying padding-top or top doesn't change anything.


  2. 0

    The issue you’re encountering is caused by the gap between the dropdown button and the dropdown menu, which causes the menu to disappear when the mouse moves out of the button area. This can be fixed by extending the hover area so that it covers the gap, or by adding a small delay to the dropdown disappearing.

    One way to resolve this is by wrapping both the dropdown button and the dropdown menu in a parent container and applying the hover effect to that container.

    <html>
<head>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <style>
    * {
      background-color: #000;
      color: #fff;
    }

    .dropdown-container {
      position: relative;
      display: inline-block;
    }

    .dropdown-container:hover .dropdown-menu {
      display: block;
      opacity: 1;
      visibility: visible;
    }

    .dropdown .dropdown-menu {
      display: none;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 100%; /* Position the dropdown below the button */
      left: 0;
      margin-top: 15px;
    }

    .dropdown-menu {
      background-color: #000;
      width: 250px;
      padding: 10px;
      border: 1px solid rgb(53, 53, 53);
    }

    .dropdown-menu .dropdown-item {
      margin-bottom: 10px;
    }

    .dropdown-menu .dropdown-item:last-child {
      margin-bottom: 0;
    }

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
      background-color: #000;
    }
  </style>
</head>
<body>
  <ul class="nav">
    <li class="px-2 dropdown-container">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Developers
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Documentation</a>
      </div>
    </li>
  </ul>
</body>
</html>
```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search