0

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>
AEON
  • 15
  • 1
  • 4
  • Possible duplicate of [How to make twitter bootstrap menu dropdown on hover rather than click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) – Aslam Apr 18 '17 at 06:33

3 Answers3

1

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>

**

Mulwaffer
  • 22
  • 4
0

<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

J. Shabu
  • 1,013
  • 9
  • 22
0

Include this code in your css

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }
Mohit Shah
  • 178
  • 1
  • 8