打造最美CSS多级下拉横向导航菜单代码分享
本文实例为大家分享了纯CSS实现多级下拉横向导航菜单代码，供大家参考，具体内容如下
先看看效果图：
实现代码：
CSS代码：
<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>Salin selepas log masuk
html代码：
<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>Salin selepas log masuk以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
Atas ialah kandungan terperinci 打造最美CSS多级下拉横向导航菜单代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD
R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?
3 minggu yang lalu
By DDD
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Buat borang hubungan JavaScript dengan rangka kerja pintar
Mar 07, 2025 am 11:33 AM
Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.
Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
Mar 04, 2025 am 10:22 AM
Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
