如何在网页上做一个图片下拉菜单

1、思路：做这样的一个图片式下拉菜单可以分为以下的这几个部分。第一：设置图片菜单的样式，一个是网页初始图片菜单样式，其次是下拉菜单中的图片菜单样式。第二：鼠标行为的声明。第三：文字与链接的声明。

2、下拉菜单的整体定义。

.dropdown {

    position: relative;

    display: inline-block;

}

3、下拉菜单的样式定义。

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #7D26CD;

    min-width: 170px;

    box-shadow: 0px 6px 17px 0px #8A8A8A;

}

4、鼠标行为定义。

.dropdown:hover .dropdown-content {

    display: block;

}

5、下拉菜单当中的文本内容定义。

.desc {

    padding: 16px;

    text-align: center;

}

6、整个代码的body 部分。标题、文本、图片地址等等。把整个图片下拉菜单呈现出来。

<h2> 图片菜单</h2>

鼠标一动菜单就变

<div class="dropdown">

  <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验

  <div class="dropdown-content">

    <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验

    <div class="desc">百度经验助力梦想</div>

  </div>

</div>

</body>