Heim

JS-Spezialeffekte

CSS3-Spezialeffekte

CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie

Jetzt downloaden Vorschau

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>商城网站常用左侧分类下拉导航菜单代码</title>

<Stil>
* { Rand: 0; Polsterung: 0; }
Körper { Rand: 0; Polsterung: 0; Textdekoration: keine; Schriftgröße: 14px; }
li { Listenstil: keine; }
.menu { Breite: 1000px; Höhe: 600px; Rand: 30 Pixel automatisch; Hintergrundfarbe: #ececec; }
.menu .menuTop { Hintergrundfarbe: #F10215; Farbe: #fff; Breite: 140px; Höhe: 40px; padding-left: 20px; Zeilenhöhe: 40px; Cursor: Zeiger; }
.menu ul { width: 160px; Hintergrundfarbe: #fff; Rand: 2px einfarbig #F10215; Boxgröße: border-box; Position: relativ; }
.menu ul li { height: 30px; Polsterung links: 8px; Textausrichtung: links; Zeilenhöhe: 30px; Schriftgröße: 13px; Hintergrund: URL(image/1.png) no-repeat right; Z-Index: 2; }
.menu ul li a { color: #7070770; }
.menu ul li a:hover { color: red; Textdekoration: unterstrichen; Cursor: Zeiger; }
.menu ul li:hover { border: 1px solid #DDD; Rand-rechts: 0; Hintergrundbild: keines; }
.menu ul li:hover .submenu { display: block; }
.menu ul li:hover span { width: 30px; Höhe: 30px; Anzeige: Inline-Block; Hintergrundfarbe: #FFF; schweben: rechts; Z-Index: 100; Position: relativ; }
.menu ul li .submenu { position: absolute; links: 146px; oben: 0; Breite: 720px; Höhe: 300px; Rand: 1 Pixel fest #DDD; box-shadow: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; Hintergrundfarbe: #FFF; Z-Index: 3; Anzeige: keine; }
.menu ul li .submenu .subleft { margin-left: 0px; Breite: 400px; Höhe: 300px; schweben: links; Polsterung: 5px; }
.menu ul li .submenu .subleft dl { Überlauf: versteckt; border-bottom: 1px solid #D1D1D1; Polsterung: 10px 0; }
.menu ul li .submenu .subleft dl dt { float: left; Höhe: 22px; Zeilenhöhe: 22px; Rand rechts: 10px; Schriftstärke: fett; Farbe: #707070; Schriftgröße: 12px; Cursor: Zeiger; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a { display: block; schweben: links; Rand links: 1 Pixel durchgehend #707070; Polsterung: 0 5px; Farbe: #707070; Höhe: 14px; Zeilenhöhe: 14px; Rand: 3px 0; Schriftgröße: 11px; }
.menu ul li .submenu .subright { width: 310px; Höhe: 300px; Hintergrundfarbe: blau; schweben: links; }
</style>

</head>
<body><script src="/demos/googlegg.js"></script>
<div class="menu">
<div class="menuTop">全部商品分类</div>
<ul>

<li> <a herf="javascript:;">Titel der ersten Ebene</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Stufe 111</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> </dd>
</dl>
</div>
<div class="subright" style="hintergrundfarbe: antikweiß">/div>
</div>
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 2</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 222</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine">;
</li>

<li> <a herf="javascript:;">Level 1 Titel 3</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 333</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue">;
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 4</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 444</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey">;
</li>

<li> <a herf="javascript:;">Level 1 Titel 5</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 555</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen">;
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 6</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 666</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Überschrift der dritten Ebene 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender">;
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 7</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 777</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Überschrift der dritten Ebene 7</a> </dd>
</dl>
</div>
<div class="subright"> </div>;
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 8</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 888</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen">;
</li>
<li> <a herf="javascript:;">Titel der ersten Ebene 9</a> <span></span>
<div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 999</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose">;
</li>

<li> <a herf="javascript:;">Titel der ersten Ebene 10</a> <div class="submenu">
<div class="subleft">
<dl>
<dt>Titel der zweiten Ebene 1010</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">三Leveltitel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Level-3-Titel</a> </dd>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Titel der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a> <a href="javascript:;">Überschrift der dritten Ebene</a>
</dl>
<dl>
<dt>Titel der zweiten Ebene</dt>
<dd> <a href="javascript:;">Überschrift der dritten Ebene</a> javascript:;">Level 3 Titel 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>

Dies ist ein relativ einfacher Code, der das CSS-Maus-Hover-Attribut verwendet, um ein häufig verwendetes Dropdown-Navigationsmenü für Kategorien auf der linken Seite für Websites von Einkaufszentren zu erstellen.

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn