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><p>鼠标一动菜单就变</p><div class="dropdown"> <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验" width="110" height="60"> <div class="dropdown-content"> <img src="https://exp.bdstatic.com/static/common/widget/top-search-box/logo_1e63520.png" alt="百度经验" width="410" height="210"> <div class="desc">百度经验助力梦想</div> </div></div></body>