html+css做下拉框

最新推荐文章于 2023-08-20 17:30:00 发布

让代码飞1926

最新推荐文章于 2023-08-20 17:30:00 发布

阅读量361

点赞数

分类专栏： Html css

本文链接：https://blog.csdn.net/qq_40596257/article/details/99853556

版权

Html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
   <h1>编程创造城市</h1>
   <div class="header">
       <div class="bg"></div>
   </div>
   <div class="menu">
   <img src="img/md-reorder.png" >
   <div class="menu-1">
       <a href="#">首页</a>
       <a href="#">产品介绍</a>
       <a href="#">我的博客</a>
       <a href="#">最新技术</a>
       <a href="#">设计分享</a>
       <a href="#">Html</a>
       <a href="#">java</a>
       <a href="#">关于</a>
   </div>
   </div>
</body>
</html>

css

*{
   margin: 0;
}
h1{
   text-align: center;
   height: 100px;
   line-height: 100px;
}
.menu>img{
   width: 100px;
   height: 100px;
   cursor: pointer;
   margin-top: -100px;
}
.menu{
position: relative;
   z-index: 3;
display: inline-block;
}
.menu-1{
display: none;
}
.menu-1>a{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.menu:hover .menu-1{
display: block;
}
.header{
   height: 100px;
}
.header{
   background: url(../img/10684071_142105474082_2.jpg);
   height: 700px;
   width: 100%;
   background-size: 100%;
   position: absolute;
   top: 100px;
}