How do i make a button dropdown while hovering?-CodePudding

We have to make a project at school and i want to make this dropdown inside a navbar expand once you hover it. I've tried diffrent solutions but so far all I get is a button that requires a click or all the options beneath each other without a dropdown.

  <li >
                            <div  id="collapsibleNavbar">
                            <ul >
                            <li >
                            <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Category</a>
                            <div  aria-labelledby="navbarDropdown">
                            <a  href="#">Login</a>
                            <a  href="#">Another action</a>
                            <div ></div>
                            <a  href="#">Something else here</a>
                            </div>
                        </li>

CodePudding user response：

You can do this using CSS, and Bootstrap.

Here is a working example.

@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');


.container {
    margin-top: 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }

       <div >
            <div >
                <div > 
                    <ul >
                        <li ><a href="#"  data-toggle="dropdown">Link</a>
                            <ul >
                                <li><a href="#">Link</a></li>
                                <li><a href="#opening">Link</a></li>
                            </ul>
                        </li>
    
                    </ul>
                </div>
            </div>
        </div>

CodePudding user response：

It does not need a framework

You could simply use :hover pseudo-class and chlid combinator(>)

The following provides three ways to implement a drop-down menu using css

.nav-item a{
  display: block;
}


.dropdown-menu-1 {
  display: none;
}

li.dropdown-1:hover>.dropdown-menu-1 {
  display: block;
}


/****** OR *******/

.dropdown-menu-2 {
  height: 0;
  overflow: hidden;
}

li.dropdown-2:hover>.dropdown-menu-2 {
  height: auto;
}

/****** OR *******/

.dropdown-menu-3 {
  opacity: 0;
  pointer-events: none;
}

li.dropdown-3:hover>.dropdown-menu-3 {
  opacity: 1;
    pointer-events: all;
}

<ul >
  <li >
    <a  id="navbarDropdown">Category</a>
    <div >
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
  <li >
    <a  id="navbarDropdown">Category</a>
    <div >
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
    <li >
    <a  id="navbarDropdown">Category</a>
    <div >
      <a>Login</a>
      <a>Another action</a>
      <a>Something else here</a>
    </div>
  </li>
</ul>