<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </li>
</ul>

<h3>导航条插入下拉菜单</h3>
<p>鼠标移动到"下拉菜单"显示列表</p>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 320px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

本文链接：https://www.aiunk.com/4099/

“从来没有人为了读书而读书，只有在书中读自己，在书中发现自己，或检查自己。”

—— 罗曼·罗兰《罗曼·罗兰》
本站内容来源于互联网，所有转载、引用的文章、图片、视频等素材均来自网络公开渠道。我们对所转载的内容的版权和合法性不做任何保证。如果原作者或版权方认为本站内容侵犯其合法权益，敬请原作者或版权方及时联系我们，我们将在第一时间进行核实和处理，必要时删除相关内容。 本站的所有内容仅供个人学习与研究之用，不得用于任何商业用途。如需使用本站内容进行商业用途，请与原作者或版权所有者联系获取授权。 如有任何疑问或建议，请联系我们。