Heim
Web-FrontendCSS-TutorialErstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation
Web-FrontendCSS-TutorialErstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale NavigationErstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation
Das Beispiel in diesem Artikel zeigt die reine CSS-Implementierung des mehrstufigen horizontalen Dropdown-Navigationsmenücodes als Referenz. Der spezifische Inhalt ist wie folgt
Werfen wir einen Blick auf die Darstellungen Erstens:
Implementierungscode:
CSS-Code:
<style type="text/css">
/* for this demo only */
#backgroundHolder { width:750px; height:500px; padding-top:10px; margin:0 auto; }
/* ---------------------------------------------------------------------------- */
/* default styling */
.nav, .nav ul { list-style-type:none; margin:0; padding:0; }
.nav a { text-decoration:none; }
.nav { font-family: arial, sans-serif; font-size:12px; width:650px; margin:0 auto; }
/* style the links */
.nav a { background:url(ulmulti3/box.gif) no-repeat rightright center; }
.nav a.top { background:url(ulmulti3/box.gif) no-repeat rightright top; }
.nav a.top2 { background:url(ulmulti3/box2.gif) no-repeat rightright top; }
.nav a.bottombottom { background:url(ulmulti3/box.gif) no-repeat rightright bottombottom; }
.rightright ul ul a { background:url(ulmulti3/box3.gif) no-repeat rightright center; }
.rightright ul ul a.top2 { background:url(ulmulti3/box3.gif) no-repeat rightright top; }
.rightright ul ul a.bottombottom { background:url(ulmulti3/box3.gif) no-repeat rightright bottombottom; }
/* style the <b> element so that is does not affect the size of the link */
.nav a b { color:#fff; font-weight:normal; display:block; padding:5px 10px 5px 15px; }
.nav .fly .main b { background: transparent url(ulmulti3/arrow.gif) no-repeat 117px 9px; }
.nav .down b { background: transparent url(ulmulti3/arrow2.gif) no-repeat 115px 11px; }
.nav .rightright ul b { text-align:rightright; }
.nav .rightright ul ul b { padding: 5px 15px 5px 10px; }
.nav .rightright ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 15px 9px; text-align:rightright; }
.nav .rightright ul ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 5px 9px; text-align:rightright; }
/* HEIGHT */
.nav ul ul { top:-24px; } /* position the top of the flyout first sub menus */
.nav ul ul ul { top:-25px; } /* position the top of the flyout second and third sub menus */
.nav ul.two { top:-40px; } /* position the top of the flyout sub menus with previous text on two lines */
/* WIDTH change this WITH CARE to suit your requirements */
/*set the link width here*/
.nav .drop, .nav a { width:130px; }
.nav ul li { max-width:130px; } /* fix for IE8 */
/* set the left flyout position here */
.nav ul ul { left:130px; }
/* set the right flyout position here */
.nav li.rightright ul ul { left:auto; rightright:120px; }
.nav li.rightright ul ul ul { left:auto; rightright:130px; }
/* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */
.nav a { margin-right:-129px; }
/* ---------------------------------------------------------------------------- */
/* DO NOT CHANGE ANYTHING BELOW */
.nav li { float:left; } /* fixes IE bugs, and allows for clearing */
.nav ul { float:left; position:relative; z-index:20; } /* necessary for float drop and to stack the <ul>s */
.nav ul li { clear:left; } /* must clear the floated list item inside sublist */
.nav a { position:relative; display:block; } /* needs to have a position, to be above the rest */
.nav a.main { float:left; /* necessary for float drop */ margin-top:10000px; } /* bring the top level links back into view */
.nav .drop, .nav .fly { margin-top:-10000px; } /* hide the sub links and their containers, opera has low upper limits */
.nav ul { margin-bottom:-5000px; } /* avoid any interaction between the subs, can be any large size */
/* The bit that does ALL the work to bring the sub menus into view */
.nav a:hover, .nav a:focus, .nav a:active { margin-right:0; z-index:10; outline:0; }
.nav a:hover b, .nav a:focus b, .nav a:active b { color:#000; cursor:pointer; } /* this is for keyboard tabbing color change */
/* OPERA fix */
.nav ul:hover, .nav ul ul:hover { clear:left; } /* to stop intermittent sub link :hover problems */
/* ---------------------------------------------------------------------------- */
</style>
<!--[if lte IE 7]>
<style type="text/css">
/* bug fixes for IE7 and lower - DO NOT CHANGE */
.nav .fly {width:99%;} /* make each flyout 99% of the prevous level */
a:active {} /* requires a blank style for :active to stop it being buggy */
</style>
HTML-Code:
<body> <p id="backgroundHolder"> <ul class="nav"> <li class="drop"><a class="main top" href="#url"><b>Home</b></a></li> <li class="drop"><a class="main down top" href="#url"><b>Equipment</b></a> <ul> <li class="fly"><a class="main" href="#url"><b>Cameras</b></a> <ul> <li><a class="top2" href="#url"><b>Film Type</b></a></li> <li><a href="#url"><b>Compact</b></a></li> <li><a href="#url"><b>Polaroid</b></a></li> <li><a href="#url"><b>Digital</b></a></li> <li class="fly"><a class="main" href="#url"><b>Digital SLR</b></a> <ul> <li><a class="top2" href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Nikon</b></a></li> <li><a href="#url"><b>Panasonic</b></a></li> <li><a class="bottom" href="#url"><b>Kodak</b></a></li> </ul> </li> <li><a class="bottom" href="#url"><b>Second Hand</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Video Cameras & Accessories</b></a> <ul class="two"> <li class="fly"><a class="main top2" href="#url"><b>Latest Models</b></a> <ul> <li><a class="top2" href="#url"><b>Nikon</b></a></li> <li><a href="#url"><b>Panasonic</b></a></li> <li><a href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a class="bottom" href="#url"><b>Minolta</b></a></li> </ul> </li> <li><a href="#url"><b>Special Offers</b></a></li> <li><a class="bottom" href="#url"><b>Professional</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Lenses</b></a> <ul> <li class="fly"><a class="main top2" href="#url"><b>Digital</b></a> <ul> <li><a class="top2" href="#url"><b>Standard</b></a></li> <li><a href="#url"><b>Telephoto</b></a></li> <li><a href="#url"><b>Wide Angle</b></a></li> <li class="fly"><a class="main" href="#url"><b>Zoom</b></a> <ul> <li><a class="top2" href="#url"><b>Nikon</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a href="#url"><b>Minolta</b></a></li> <li><a class="bottom" href="#url"><b>Panasonic</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Zoom with Macro</b></a> <ul> <li><a class="top2" href="#url"><b>Panasonic</b></a></li> <li><a href="#url"><b>Minolta</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a href="#url"><b>Canon</b></a></li> <li><a class="bottom" href="#url"><b>Nikon</b></a></li> </ul> </li> <li><a href="#url"><b>Fisheye</b></a></li> <li><a class="bottom" href="#url"><b>x2 converters</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Standard SLR</b></a> <ul> <li><a class="top2" href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Nikon</b></a></li> <li><a href="#url"><b>Panasonic</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a class="bottom" href="#url"><b>Minolta</b></a></li> </ul> </li> <li><a href="#url"><b>Cases</b></a></li> <li class="fly"><a class="main" href="#url"><b>Large Format</b></a> <ul> <li><a class="top2" href="#url"><b>Hasselblad</b></a></li> <li><a href="#url"><b>Arca-Swiss</b></a></li> <li><a class="bottom" href="#url"><b>Leica</b></a></li> </ul> </li> <li><a href="#url"><b>Lens Hoods</b></a></li> <li><a class="bottom" href="#url"><b>Lens Cleaners</b></a></li> </ul> </li> <li><a href="#url"><b>Tripods</b></a></li> <li><a href="#url"><b>Flashguns</b></a></li> <li><a href="#url"><b>Accessories, filters & lens covers</b></a></li> <li><a href="#url"><b>Special Offers</b></a></li> <li><a class="bottom" href="#url"><b>Electronics</b></a></li> </ul> </li> <li class="drop"><a class="main down top" href="#url"><b>Accessories</b></a> <ul> <li class="fly"><a class="main" href="#url"><b>Flashguns</b></a> <ul> <li class="fly"><a class="main top2" href="#url"><b>Digital Cameras</b></a> <ul> <li><a class="top2" href="#url"><b>Nikon</b></a></li> <li><a href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Panasonic</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a class="bottom" href="#url"><b>Kodak</b></a></li> </ul> </li> <li><a href="#url"><b>Film Cameras</b></a></li> <li><a href="#url"><b>Reflectors</b></a></li> <li><a href="#url"><b>Stands</b></a></li> <li><a href="#url"><b>Remote Control</b></a></li> <li><a class="bottom" href="#url"><b>Batteries</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Filters</b></a> <ul> <li><a class="top2" href="#url"><b>Ultra Violet</b></a></li> <li><a href="#url"><b>Lens protection</b></a></li> <li><a href="#url"><b>Yellow</b></a></li> <li><a href="#url"><b>Red</b></a></li> <li><a href="#url"><b>Orange</b></a></li> <li><a class="bottom" href="#url"><b>Blue</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Remote Control</b></a> <ul> <li><a class="top2" href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Nikon</b></a></li> <li><a class="bottom" href="#url"><b>Pentax</b></a></li> </ul> </li> <li class="fly"><a class="main" href="#url"><b>Camera Cases</b></a> <ul> <li><a class="top2" href="#url"><b>Pentax</b></a></li> <li><a href="#url"><b>Nikox</b></a></li> <li><a href="#url"><b>Canon</b></a></li> <li><a href="#url"><b>Pentax</b></a></li> <li><a href="#url"><b>Kodak</b></a></li> <li><a class="bottom" href="#url"><b>Minolta</b></a></li> </ul> </li> <li><a class="bottom" href="#url"><b>Lens Brush</b></a></li> </ul> </li> <li class="drop right"><a class="main down top" href="#url"><b>Outlets</b></a> <ul> <li><a href="#url"><b>Support</b></a></li> <li><a href="#url"><b>Buying</b></a></li> <li><a href="#url"><b>Photographers</b></a></li> <li class="fly"><a class="main" href="#url"><b>Stockist</b></a> <ul> <li><a class="top2" href="#url"><b>Currys</b></a></li> <li><a href="#url"><b>Dixons</b></a></li> <li><a href="#url"><b>Jessops</b></a></li> <li><a class="bottom" href="#url"><b>Staples</b></a></li> </ul> </li> <li><a href="#5"><b>General</b></a></li> <li class="fly"><a class="main bottom" href="#url"><b>Sales</b></a> <ul> <li><a class="top2" href="#url"><b>USA</b></a></li> <li><a href="#url"><b>CANADA</b></a></li> <li><a href="#url"><b>South America</b></a></li> <li class="fly"><a class="main" href="#url"><b>Europe</b></a> <ul> <li><a class="top2" href="#url"><b>Britain</b></a></li> <li><a href="#url"><b>France</b></a></li> <li><a href="#url"><b>Germany</b></a></li> <li><a href="#url"><b>Spain</b></a></li> <li><a class="bottom" href="#url"><b>Italy</b></a></li> </ul> </li> <li><a href="#url"><b>Australia</b></a></li> <li><a class="bottom" href="#url"><b>Asia</b></a></li> </ul> </li> </ul> </li> <li class="drop"><a class="main top" href="#url"><b>Privacy Policy</b></a></li> </ul> </p> <br> <br> <p align="center"> </p> </body>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt .
Das obige ist der detaillierte Inhalt vonErstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Draggin ' und Dropfen ' in ReactApr 17, 2025 am 11:52 AMDas React -Ökosystem bietet uns viele Bibliotheken, die alle auf die Interaktion von Drag & Drop konzentrieren. Wir haben React-Dnd, React-beautiful-dnd,
Schnelle SoftwareApr 17, 2025 am 11:49 AMIn letzter Zeit gab es einige wunderbar miteinander verbundene Dinge über schnelle Software.
Verschachtelte Gradienten mit HintergrundclipApr 17, 2025 am 11:47 AMIch kann nicht sagen, dass ich das all das oft im Hintergrund-Clip verwende. I ' D Wette It ' wird in der täglichen CSS-Arbeit kaum jemals verwendet. Aber ich wurde in einem Posten von Stefan Judis daran erinnert,
Verwenden von RequestAnimationFrame mit React -HooksApr 17, 2025 am 11:46 AMDie Animation mit RequestAnimationFrame sollte einfach sein, aber wenn Sie die Dokumentation von React nicht gründlich gelesen haben, werden Sie wahrscheinlich auf ein paar Dinge stoßen
Müssen Sie nach oben auf der Seite scrollen?Apr 17, 2025 am 11:45 AMVielleicht ist der einfachste Weg, dies dem Benutzer anzubieten, ein Link, der auf eine ID auf das Element abzielt. Also wie ...
Die beste API (GraphQL) ist eine, die Sie schreiben, die Sie schreibenApr 17, 2025 am 11:36 AMHören Sie, ich bin kein GraphQL -Experte, aber ich arbeite gerne damit. Die Art und Weise, wie es mir Daten als Front-End-Entwickler vorstellt, ist ziemlich cool. Es ist wie ein Menü von
Wöchentliche Plattform News: Textabstand Lesezeichen, Top-Level-Erwartung, neuer Verstärker-LadeindikatorApr 17, 2025 am 11:26 AMIn der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.
Verschiedene Methoden zur Erweiterung einer Schachtel und gleichzeitig den GrenzradiusApr 17, 2025 am 11:19 AMI ' Ich habe kürzlich eine interessante Änderung auf Codepen bemerkt: Als es ein Rechteck mit abgerundeten Ecken auf der Homepage schwebt, expandieren Sie sich im Rücken.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
3 Wochen vorByDDD
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
