-1

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

Mubashir
  • 4,134
  • 4
  • 22
  • 30
  • 3
    Please attempt this for yourself before asking. Show some code that you've tried and then some can then help you – YaBCK Oct 09 '15 at 09:45

2 Answers2

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.

Community
  • 1
  • 1
hmartos
  • 861
  • 2
  • 10
  • 19
  • 1
    **This is really a comment, not an answer.** I appreciate that you may not yet have sufficient reputation to leave comments but please do not use the answer system as a replacement. Gaining reputation is fairly easy and only requires a little effort on your part. Thanks! – Paulie_D Oct 09 '15 at 10:17
  • Thank you very much for understanding my situation @Paulie_D! – hmartos Oct 09 '15 at 11:00
1

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

YaBCK
  • 2,949
  • 4
  • 32
  • 61
  • Thanks brother Beckett. Actually i am a fresher and i dont have much knowledge of front end development. thanks for the help. – Mubashir Oct 11 '15 at 06:11
  • i want to ask one more question ? i want to hide the drop down menu on click on the link which are under the drop down menu – Mubashir Oct 16 '15 at 11:53
  • @Mubashir could you explain a little more about what you want and I'll be able to help you out? – YaBCK Oct 16 '15 at 21:46