如何从菜单栏中制作下拉列表

Question

我目前有一个带有食物和健身部分的菜单栏，但我希望能够点击它们并显示一个下拉列表以指向页面。我需要添加什么代码才能获得下拉列表？

menu.php

block--views--views-machine-name-display-name.tpl.php

的style.css

<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>

Answer 1

以下是您可以在代码中使用的一个非常基本的示例：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.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>