CSS初级项目如何制作下拉菜单_hover伪类和display控制显示-css教程-PHP中文网

CSS初级项目如何制作下拉菜单_hover伪类和display控制显示

P粉602998670

发布： 2025-11-26 20:13:02

原创

154人浏览过

答案是使用CSS的:hover伪类和display属性可创建无需JavaScript的下拉菜单。首先构建基于ul的HTML结构，通过flex布局使菜单横向排列；接着用position定位子菜单，并设display:none默认隐藏；再利用.dropdown:hover .submenu设置display:block实现悬停显示；最后可添加visibility、opacity和transition实现淡入动画，配合z-index避免遮挡问题。整个过程仅需基础CSS即可完成交互效果。

css初级项目如何制作下拉菜单_hover伪类和display控制显示

制作一个简单的下拉菜单，可以使用 CSS 的 :hover 伪类配合 display 属性来控制子菜单的显示与隐藏。这种方法不需要 JavaScript，适合 CSS 初学者练习布局和交互效果。

1. 基本 HTML 结构

下拉菜单通常基于无序列表（ul）构建，结构清晰且语义化：

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

登录后复制

2. 基础样式设置

先给菜单添加基本样式，使其横向排列，并隐藏子菜单：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  display: flex;
}
<p>.menu > li {
position: relative;
}</p><p>.menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}</p><p>.menu a:hover {
background: #555;
}</p>

登录后复制

3. 使用 :hover 和 display 控制下拉菜单

关键点是默认隐藏 .submenu，当鼠标悬停在父级 li 上时显示它：

立即学习“前端免费学习笔记（深入）”；

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

266

查看详情

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  width: 150px;
  display: none; /* 默认隐藏 */
}
<p>.dropdown:hover .submenu {
display: block; /<em> 悬停时显示 </em>/
}</p>

登录后复制

4. 可选：添加一点过渡动画

虽然 display 不能直接加过渡动画，但你可以结合 opacity 和 visibility 实现淡入淡出效果（进阶技巧）：

.submenu {
  ...
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
<p>.dropdown:hover .submenu {
visibility: visible;
opacity: 1;
display: block;
}</p>

登录后复制

注意：如果使用 visibility + opacity，仍需设置 display: block 来确保元素占据空间并可点击。

基本上就这些。通过简单的 :hover 和 display 控制，就能实现一个干净实用的下拉菜单，适合静态网站或学习项目。不复杂但容易忽略细节，比如定位和层级，建议加上 z-index 防止被其他元素遮挡。

以上就是CSS初级项目如何制作下拉菜单_hover伪类和display控制显示的详细内容，更多请关注php中文网其它相关文章！