Drop down menu on hover the navigation bar?

257
November 22, 2016, at 10:45 AM

I want to create a drop down menu like this website http://www.jamieoliver.com/ . To see the drop down menu, just hover the navigation bar on this http://www.jamieoliver.com/ website

Answer 1

You should see this questions:

Bootstrap Dropdown with Hover

How to make twitter bootstrap menu dropdown on hover rather than click,

Anyway, you should have provided some code or some tries you have done before asking as @Chris Beckett said.

Answer 2

Here a quick example for you to have a look at. In the future please try and attempt to do this yourself before asking a question on here. That way least you've given it a go before someone has handed you it on a spoon.

HTML:

  <body class="news">
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="tutorials"><a href="#">Tutorials</a>
          <ul>
            <li><a href="#">Tutorial</a></li>
            <li><a href="#">Tutorial2</a></li>
            <li><a href="#">Tutorial3</a></li>
          </ul>
        </li>
        <li class="about"><a class="active" href="#">About</a></li>
        <li class="news"><a href="#">Newsletter</a>
          <ul>
            <li><a href="#">News1</a></li>
            <li><a href="#">News2</a></li>
            <li><a href="#">News3</a></li>
          </ul>
        </li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
</body>

CSS:

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}
/* Sub Menus */
.nav li li {
  font-size: .8em;
}
/*******************************************
   Style menu for larger screens
   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }
  .nav a {
    border-bottom: none;
  }
  .nav > ul > li {
    text-align: center;
  }
  .nav > ul > li > a {
    padding-left: 0;
  }
  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    left: 0;
    width: 100%;
    height: 400px;
    background-color: grey;
  }
  .nav li:hover ul {
    display: block;
  }
  .nav li ul li {
    float: left;
    width: 20%;
  }
}

JSFIDDLE EXAMPLE

READ ALSO
jquery UI resizable with set timeout and clear timeout

jquery UI resizable with set timeout and clear timeout

Hi I'm having problems with jquery resizable function or perhaps a callback,.

513
How do I display server side json data in Bootstrap model table

How do I display server side json data in Bootstrap model table

I am trying to display json data in bootstrap model table. [nnn]with ajax call I am puling the data from database and my controller returns the data in json format.

382
how to find last element where element is NOT NULL from json array

how to find last element where element is NOT NULL from json array

How to check or display the last call_no where call_no IS NOT NULL using below JSON. Please help.

459