How to make a drop down list from menu bar

Question

I currently have a menu bar with a food and fitness section , but I want to be able to click on them and display a drop down list to direct to pages. What code do I need to add to get a drop down list?

menu.php

<link rel="stylesheet" href="menu.css/style.css">
<nav>
        <ul>
            <li class="Food"><a href="food.php">food</a></li>
            <li class="Exercise"><a href="exercise.php">exercise</a></li>
        </ul>
</nav>

style.css

a {
    color:#9b1428;
    text-decoration:none;
    text-transform:uppercase;
}
nav {
    background-color:#9b1428;
    font-family:verdana,arial,times,serif;
    font-size:.875em;
    overflow:hidden;
    padding-left:4%;
}
nav ul {
    padding:0;
    margin:0;
}
nav ul li {
    list-style-type:none;
    float:left;
    position:relative;
    padding:0;
    margin:0;
}
nav ul li a {
    display:block;
    color:#fff;
    padding:.875em .625em;
    margin:0;
}
nav ul li a:hover,
nav ul li a:focus {
    background-color:#fff;
    color:#9b1428;
    text-decoration:underline;
    font-weight:normal;
}


#food .food a,
#exercise .exercise a,
    color:#9b1428;
    background-color:#fff;
    pointer-events:none;
}

Jquery slide toggle is a good and easy tool but its with javascript. http://api.jquery.com/slidetoggle/ — PEPEGA, Mar 27 '18 at 12:38

score 0 · Answer 1 · answered Mar 27 '18 at 13:28

Here is a very basic example which you can maybe use in your code:

.dropdown-content {
  display: none;
  position: absolute;
  background-color: powderblue;
  min-width: 120px;
  z-index: 1;
}

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

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <ul>
      <a href="#"><li>link1</li></a>
      <a href="#"><li>link2</li></a>
      <a href="#"><li>link3</li></a>
    </ul>
  </div>
</div>

score 0 · Answer 2 · edited Mar 28 '18 at 05:08

.main-menu { }
.main-menu nav ul {
    margin: 0;
    padding: 0;
}
.main-menu nav > ul > li {
    display: inline-block;
    position: relative;
    margin: 0;
}
.main-menu nav > ul > li + li {
    margin-left: 20px;
}
.main-menu nav > ul > li a {
    display: block;
    color: #000;
    font-size: 16px;
    padding: 20px 0;
    text-decoration: none;
    transition: .3s;
}
.main-menu nav > ul > li:hover > a {
    color: #7AA93C;
}
.main-menu nav ul li ul {
    position: absolute;
    padding: 10px 0;
    width: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.main-menu nav ul li:hover ul {
    top: 100%;
    opacity: 1;
    visibility: visible;
}
.main-menu nav ul li ul li {
    display: block;
    padding: 0;
    margin: 0;
}
.main-menu nav ul li ul li a {
    display: block;
    text-decoration: none;
    padding: 6px 20px;
    font-size: 14px;
    color: #444;
    transition: .3s;
}
.main-menu nav ul li ul li:hover a {
    color: #7AA93C;
}

<div class="main-menu">
  <nav>
    <ul>
      <li>
        <a href="#">Home</a>
        <!-- submenu start -->
        <ul class="submenu">
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
        </ul>
        <!-- submenu end -->
      </li>
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Service</a>
        <!-- submenu start -->
        <ul class="submenu">
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
          <li><a href="#">Sub Menu</a></li>
        </ul>
        <!-- submenu end -->
      </li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

How to make a drop down list from menu bar

2 Answers2