首頁

JS特效

CSS3特效

CSS的商城網站常用左側分類下拉導覽選單代碼

現在下載預覽

<頭>
<元字元集=“UTF-8”>
商城網站常用箭頭分類導覽選單代碼

<風格>
* { 邊距：0；填充：0； }
主體{邊距：0;填充：0；文字裝飾：無；字體大小：14px； }
li { 列表樣式：無； }
.menu { 寬度：1000px;高度：600 像素；邊距：30px 自動；背景顏色：#ececec； }
.menu .menuTop { 背景顏色：#F10215;顏色：#fff；寬度：140px；高度：40px；左內邊距：20px；行高：40px；遊標：指針； }
.menu ul { 寬度：160px;背景顏色：#fff；邊框：2px實線#F10215；框大小：邊框框；位置：相對； }
.menu ul li { 高度：30px;左內邊距：8px；文字對齊：左對齊；行高：30px；字體大小：13px；背景：url(image/1.png)無重複右； z 索引：2； }
.menu ul li a { 顏色：#7070770; }
.menu ul li a:hover { 顏色：紅色；文字裝飾：底線；遊標：指針； }
.menu ul li:hover { border: 1pxsolid #DDD;右邊界：0；背景圖像：無； }
.menu ul li:hover .submenu { 顯示：塊； }
.menu ul li:懸停跨度{寬度:30px;高度：30px；顯示：內聯塊；背景顏色：#FFF；浮動：右； z 索引：100；位置：相對； }
.menu ul li .submenu { 位置：絕對；左：146 像素；頂部：0；寬度：720px；高度：300px；邊框：1px實心#DDD；框陰影：0 0 8px #DDD； -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD;背景顏色：#FFF； z 索引：3；顯示：無； }
.menu ul li .submenu .subleft { 左邊距：0px;寬度：400px；高度：300px；向左飄浮;內邊距：5px； }
.menu ul li .submenu .subleft dl { 溢出：隱藏；邊框底部：1px實心#D1D1D1；內邊距：10px 0； }
.menu ul li .submenu .subleft dl dt { float: left;高度：22px；行高：22px；右邊距：10px；字體粗細：粗體；顏色：#707070；字體大小：12px；遊標：指針； }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { 顯示：塊；向左飄浮;左邊框：1px 實線#707070；內邊距：0 5px；顏色：#707070；高度：14px；行高：14px；邊距：3px 0；字體大小：11px； }
.menu ul li .submenu .subright { 寬度：310px;高度：300px；背景顏色：藍色；向左飄浮; }
</風格>

</頭>

全部商品分類

;
<ul>

<li> <a herf="javascript:;">一級標題 1</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題111</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: antiquewhite"> </div>
</div>
</li>


<li> <a herf="javascript:;">一級標題 2</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題222</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine"> </div>
</li>


<li> <a herf="javascript:;">一級標題 3</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題333</dt>
# <dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue"> </div>
</li>


<li> <a herf="javascript:;">一級標題 4</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題444</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey"> </div>
</li>


<li> <a herf="javascript:;">一級標題 5</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題555</dt>
# <dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen"> </div>
</li>


<li> <a herf="javascript:;">一級標題 6</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題666</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender"> </div>
</li>


<li> <a herf="javascript:;">一級標題 7</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題777</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題7</a> </dd>
</dl>
</div>
<div class="subright"> </div>
</li>


<li> <a herf="javascript:;">一級標題 8</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題888</dt>
# <dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen"> </div>
</li>
<li> <a herf="javascript:;">一級標題 9</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題999</dt>
# <dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose"> </div>
</li>


<li> <a herf="javascript:;">一級標題 10</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>二級標題1010</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題< ;/a> </dd>
</dl>
<dl>
<dt>二級標題</dt>
<dd> <a href="javascript:;">三級標題</a> <a href="javascript:;">三級標題</a> <a href=" javascript:;">三級標題10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:salmon"> </div>
</li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
# </div>
</body>
</html>

這是一款比較簡單的利用css滑鼠懸停屬性來製作商城網站常用左側分類下拉導覽選單程式碼。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展，網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用，可為網頁增添動感與視覺效果，提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例，幫助開發者更熟練地運用CSS3特效，提升網頁的使用者體驗。過渡效果（Transition）過渡效果是CSS3中最基本的特效之一，透過改變某個屬