如何在網頁上做一個圖片下拉菜單

下拉菜單有很多不同的類型,我們在這一章節當中就來學學如何做一個圖片下拉菜單,只要滑鼠經過這個圖片,下拉菜單就自動呈現出來。

工具/原料

dreamweaver

方法/步驟

思路:做這樣的一個圖片式下拉菜單可以分為以下的這幾個部分。第一:設置圖片菜單的樣式,一個是網頁初始圖片菜單樣式,其次是下拉菜單中的圖片菜單樣式。第二:滑鼠行為的聲明。第三:文字與連結的聲明。

下拉菜單的整體定義。

.dropdown {

position: relative;

display: inline-block;

}

下拉菜單的樣式定義。

.dropdown-content {

display: none;

position: absolute;

background-color: #7D26CD;

min-width: 170px;

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

}

滑鼠行為定義。

.dropdown:hover .dropdown-content {

display: block;

}

下拉菜單當中的文本內容定義。

.desc {

padding: 16px;

text-align: center;

}

整個代碼的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>

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場