JS-Spezialeffekte
CSS3-Spezialeffekte
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden häufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
<!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.
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
Verwandter Artikel
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
14 Oct 2016
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
04 Aug 2016
Ich habe einige gut aussehende Websites gesehen und wollte wissen, wie ihre Animationen und Spezialeffekte erstellt wurden. Gibt es eine Software oder ein Plug-in, das die gesamte URL einschließlich JS- und CSS-Stilen extrahieren kann?
Können Sie in CSS3 unterschiedliche Breiten für Spalten festlegen?
31 Oct 2024
Spaltenbreiten in CSS3 anpassenFrage:Ist es möglich, in CSS3 unterschiedliche Breiten für Spalten anzugeben?Diskussion:In CSS3 ist die Spaltenbreite...
Warum funktioniert meine CSS3-Animation in Safari nicht?
29 Nov 2024
CSS3-Animationen funktionieren in Safari nicht. Es treten einige Probleme mit Animationen auf, die CSS3 verwenden und CSS3 unterstützen ...
Können HTML5 und CSS3 wirklich Kreise zeichnen?
23 Nov 2024
Kreise mit HTML5 und CSS3 zeichnenDiese Frage untersucht die Möglichkeit, Kreise mit HTML5 und CSS3 zu zeichnen. Können HTML5 und CSS3 ... erstellen?
Wie kann ich einen eingefügten Randradius mithilfe von CSS3-Verläufen simulieren?
05 Dec 2024
Simulieren eines eingefügten Randradius mit CSS3-Verläufen Das Erreichen eines eingelassenen Randradiuseffekts allein mit CSS3 stellt eine Herausforderung dar. Allerdings mit CSS3...
Wie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?
13 Nov 2024
Wellenform mit Rand mit CSS3 und SVGDie Implementierung einer Wellenform mit CSS3 kann eine Herausforderung sein. Während CSS3-Formen eine große Auswahl bieten ...
Warum funktioniert meine CSS3-Animation in Safari nicht?
14 Dec 2024
CSS3-Animationen funktionieren in Safari nicht. Sie stehen vor einem Problem, bei dem CSS3-Animationen in Safari nicht funktionieren. Obwohl die Animation CSS3 unterstützt...
Hot Tools
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS-Text wird zu einem herzförmigen Animationsspezialeffekt kombiniert
CSS3 SVG-Ausdruck, Blumenanimation, Spezialeffekte
Der SS3 SVG-Spezialeffekt „Geständnisblumen-Animation“ ist ein Spezialeffekt für die Valentinstag-Animation.
jQuery+CSS3 Valentinstag-Liebeseffekt
jQuery+CSS3 Der Valentinstag-Liebesspezialeffekt ist ein hängender, schwingender Herzanimations-Spezialeffekt zum Valentinstag.
CSS3-Löffel schöpft klebrige Reisbällchen mit Spezialeffekten
Eine Schüssel mit süßem Klebreisbällchen-Ausdruck, ein Löffel, der eine Klebreisbällchen-Animation mit Spezialeffekten aufnimmt
Reines CSS zum Zeichnen von Bingdundun und Xuerongrong
Ein handgeschriebener reiner CSS-Code zum Zeichnen von realistischem Eis und Schnee.