CODEWITHSUNDEEP
htmltwitter-bootstrap-3
AEON
AEON

Reputation: 15

How to make a bootstrap button open on hover

I am making a website as an assessment and I do not know how to make a bootstrap menu in a navbar open on hover. Link to bootstrap: http://getbootstrap.com/components/ The code is:

<nav class="navbar navbar-inverse" position:fixed>
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
       <a class="navbar-brand" href="Index.html">Electricity Production</a>
       <a href="Index.html"><img src="Images/Edited photos/simple-energy.png" width="60" height="60" alt=""/></a>
</div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle; active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Renewable <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="Renewable's.html">What is renewable energy?</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="Solar,Wind&Hydro.html">Solar/Wind/Hydro</a></li>
            <li><a href="Biomass&Geothermal.html">Biomass & Geothermal</a></li>
          </ul>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle; active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Non-Renewable <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="Non-Renewables.html">What is non-renewable energy?</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="Fossil_Fuels&nuclear.html">Fossil fuels & nuclear</a></li>
          </ul>
        </li>
          </li>
      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

Upvotes: 0

Views: 1419

Answers (3)

Mohit Shah
Mohit Shah

Reputation: 188

Include this code in your css

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

Upvotes: 0

Mulwaffer
Mulwaffer

Reputation: 22

I hope this will work well.i tried this code and i got the result **

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}


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


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}


.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {
    display: block;
}

is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">ITEM 1</a>
    <a href="#">ITEM 2</a>
    <a href="#">ITEM 3</a>
  </div>
</div>

**

Upvotes: 1

J. Shabu
J. Shabu

Reputation: 1053

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>Please add jquery to the head of the html page you have created

Upvotes: 0

Related Questions