css初级项目实现导航菜单下拉效果-css教程-PHP中文网

css初级项目实现导航菜单下拉效果

P粉602998670

发布： 2025-09-20 16:01:01

原创

620人浏览过

答案：使用HTML和CSS创建水平导航菜单，通过:hover和position实现子菜单垂直下拉。主菜单用flex布局，子菜单绝对定位并默认隐藏，悬停时显示，支持背景、内边距和悬停样式，可扩展动画与响应式设计。

css初级项目实现导航菜单下拉效果

实现一个简单的下拉导航菜单，使用纯 HTML 和 CSS 就能完成，适合初学者练习。下面是一个基础但实用的下拉菜单示例，包含水平主菜单和垂直子菜单。

1. HTML 结构

先搭建基本的导航结构，使用 ul 和 li 标签构建菜单：

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">电子产品</a></li>
        <li><a href="#">服装</a></li>
        <li><a href="#">图书</a></li>
      </ul>
    </li>
    <li>
      <a href="#">服务</a>
      <ul class="dropdown">
        <li><a href="#">技术支持</a></li>
        <li><a href="#">客户咨询</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

登录后复制

2. 基础 CSS 样式

设置主菜单为横向排列，并隐藏子菜单（下拉部分）：

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  display: flex;
}
<p>.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
}</p><p>.navbar li {
position: relative;
}</p><p>/<em> 鼠标悬停时显示下拉菜单 </em>/
.navbar li:hover > .dropdown {
display: block;
}</p><p>/<em> 下拉菜单样式 </em>/
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
min-width: 150px;
z-index: 1;
}</p><p>.dropdown li {
width: 100%;
}</p><p>.dropdown a {
padding: 12px 20px;
}</p><p>/<em> 下拉菜单悬停效果 </em>/
.dropdown a:hover {
background-color: #555;
}</p>

登录后复制