简单的二级导航页面（纯css实现，运用display属性hover）

最新推荐文章于 2025-07-09 09:20:15 发布

青菜馒头

最新推荐文章于 2025-07-09 09:20:15 发布

阅读量1.3w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：导航菜单 css运用鼠标悬停文章标签： css 二级导航 hover

本文链接：https://blog.youkuaiyun.com/lp2659359879/article/details/52536417

css运用同时被 3 个专栏收录

14 篇文章

订阅专栏

鼠标悬停

3 篇文章

订阅专栏

导航菜单

1 篇文章

订阅专栏

本文介绍了如何使用CSS和HTML创建一个简单的二级导航菜单。通过调整display属性和利用hover效果，实现了在鼠标悬停时显示子菜单的功能。提供完整的HTML和CSS代码示例，并展示最终的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<div class="menu">    
 <ul>    
   <li><a href="#" class="bccolor">首页</a></li>    
   <li><a href="#">关于我们</a>    
     <ul>    
      <li><a href="#">公司简介</a></li>    
      <li><a href="#">人才招聘</a></li>    
      <li><a href="#">联系我们</a></li>    
    </ul>    
  </li>    
  <li><a href="#">新闻中心</a>    
    <ul>    
      <li><a href="#">最新资讯</a></li>    
      <li><a href="#">行业新闻</a></li>    
      <li><a href="#">公司公告</a></li>    
    </ul>    
  </li>    
  <li><a href="#">联系我们</a></li>    
 </ul>    
</div>

css代码

body{margin:0px;padding:0px;}    
ul;li{list-style:none;}    
a{display:block;}    
a:link,a:visited{text-decoration: none;color:#000000;}    
.menu{margin:0px auto;width:600px;height:30px;}    
.menu ul{margin:0px;padding:0px;}    
.menu ul li{position:relative;float:left;list-style:none;    
    font-size:14px;width:100px;text-align: center;line-height:30px;    
    margin-right:1px;background:#999999; } 
.menu ul li .bccolor{color:red; font-weight:bold;}
.menu ul li ul{display:none;} 
.menu ul li ul li{margin-top:1px}
.menu ul li:hover{background:red;}
.menu ul li a:hover{color:#fff;}
.menu ul li:hover ul{display:block;position: absolute; left: 0px; top: 30px;}

效果图：

弹出二级导航hover