Izmantojot kompetentu HTML kodu un vienkāršus CSS noteikumus, varat izveidot uznirstošo izvēlni, to papildināt un modificēt. Izmantojot kaskādes tabulas un iezīmēšanas valodas rīkus, varat pārliecināties, ka pati izvēlne visās pārlūkprogrammās darbojas pareizi.
Instrukcijas
1. solis
Vispirms turieties pie galvenās izvēlnes joslas. Izveidojiet īpašu numurētu sarakstu ar apakšizvēlni teksta redaktorā. Parasti šiem mērķiem tiek izmantots "Notepad". Apakšizvēlne darbojas kā vecāku saraksta elements. Piemēram: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
2. solis
Saglabājiet šo sarakstu atsevišķā HTML failā. Pēc tam izveidojiet.css failu. Ievadiet visus nepieciešamos stila lapas parametrus. Dariet to ļoti uzmanīgi, jo viena kļūda, un uznirstošā izvēlne netiks parādīta pareizi vai nedarbosies vispār.
3. solis
Noņemiet visas aizzīmes un aizpildījumus, kas lietoti ložu sarakstā. Iestatiet izvēlnes platumu, izmantojot CSS rīkus: ul -style: none; platums: 200px; }
4. solis
Visu saraksta vienumu relatīvo pozīciju atzīmējiet ar atribūtu, ko sauc par pozīciju: ul li: relatīvais; }
5. solis
Tad sakārtojiet apakšizvēlni, kuras elementi parādīsies no vecāku izvēlnes pa labi, kad peles kursors atrodas virs vienuma: li ul: absolūts; pa kreisi: 199 pikseļi; augšā: 0; displejs: nav; }
6. solis
Kreisais atribūts ir par vienu pikseļu mazāks nekā pašas izvēlnes platums. Tas ļauj uznirstošos vienumus pareizi novietot, neveidojot dubultas apmales. Displeja atribūts tiek izmantots, lai paslēptu apakšizvēlni, atverot lapu.
7. solis
Veidojiet saites pēc vajadzības, izmantojot atbilstošās css opcijas. Iekļaujiet parametru display: block, lai saites aizņemtu visu tām rezervēto vietu. Lai izvēlne tiktu parādīta, kad peles kursors virzās virs tās, ievadiet šādu kodu: li: hover ul: block; }
8. solis
Iestatiet papildu iespējas saraksta vienumu un saišu parādīšanai pēc vēlēšanās. Iekļaujiet atribūtu.html failā. Uznirstošā izvēlne ir gatava lietošanai.
