HTML下拉菜单栏

chxul

已于 2025-04-18 20:08:35 修改

阅读量710

点赞数 3

CC 4.0 BY-SA版权

文章标签： html css css3 前端 javascript

于 2023-03-28 09:51:12 首次发布

本文链接：https://blog.youkuaiyun.com/chxul/article/details/129808880

本文介绍了如何使用HTML、CSS和JavaScript实现具有特定状态效果的下拉菜单栏，包括展示详细代码示例。

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

html做下拉菜单栏
状态效果如下：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
          <style>
            .one{
              width:200px;
              }
            .two{
              width:200px;
              height:50px;
              background-color:blue;
              text-align:center;
              line-height:50px;
              color: aqua;
              }
            .three{
              width:200px;
              height:300px;        
              background-color:green;
              display:none;
              }
            ul{
              list-style:none;
              margin-left:-40px;
              }
            ul li{
              line-height:50px;
              display:block;
              width:200px;
              text-align:center;
              }
            .one:hover{
            	cursor: pointer;
            }
            .one:hover .three{
            	display: block;
            }
            .one:hover .two{
            	background-color: bisque;
            }
            li:hover{
            	background-color: cadetblue;
            	color: aquamarine;
            }
          </style>
	</head>
	<body>
	 <div class="one">
         <div class="two">下拉菜单</div>
         <div class="three">
            <ul>
               <li>列表项1</li>
               <li>列表项2</li>
               <li>列表项3</li>
               <li>列表项4</li>
            </ul>
         </div>
         </div>
	</body>
</html>