Cascading Style Sheets (CSS) on nimi, mida kasutatakse hüperteksti märgistuskeele (HTML) või laiendatava märgistuskeele (XML) dokumendi vormindamise kirjeldamiseks. Seda saab kasutada mis tahes tüüpi XML-dokumentide jaoks, kuid kõige sagedamini kasutatakse seda HTML-is kirjutatud veebilehtede puhul. CSS-i saab kasutada veebilehtedel rippmenüüde loomiseks. CSS-i rippmenüüdes kuvatakse üksainus tekstiüksus, kuni külastaja viib hiirekursori menüü kohale, misjärel kuvatakse kogu üksuste loend. Menüü luuakse CSS-i identifitseerimis- ja klassisiltide abil.
CSS-i rippmenüüd algavad ID-valijaga. See valija näeb välja nagu #. Sellele järgneb ID nimi. Saate ID-le nimetada mis tahes, kuid see peaks olema kirjeldav, et teised saaksid teie koodi lugeda. Näiteks võib rippmenüü kasutada koodi #drop1.
Looge klass rippmenüü esimese üksuse jaoks, kasutades klassivalijat, mis näeb välja nagu punkt. Klass on osa HTML-loendi elemendist. Loendielement on tähistatud tähemärkidega “li”. Looge tippklass, tippides “li.top”. Klassi kirjeldus asub kahe lokkis sulgede vahel.
Järgmine näide näitab loendi esimese üksuse kogu CSS-koodi:
#drop1 li.top {font-perekond: Verdana, Genf, san-serif;
fondi suurus: 100%;
värv: #FF00FF;}
Järgmisena looge klass üksuste jaoks, mis peidetakse CSS-i menüü esimese üksuse alla. Klassis kirjeldatakse HTML-i järjestamata loendit, mis on tähistatud tähemärkidega “ul”. Kirjeldus näeb sisuliselt välja samasugune kui ülataseme menüüelement, lisades kirjelduse algusesse sõnad “display:none#59”. See näitab, et järjestamata loendis olevad üksused on peidetud, kuni kursor liigub CSS-i rippmenüü kohal.
Järgmine on näide CSS-koodi selle osa kohta:
#drop1 ul.link {
display:none#59
fondiperekond: Verdana, Genf, san-serif;
fondi suurus: 100%;
värv: #FF00FF;}
Soovite, et CSS-i rippmenüü ilmuks ülejäänud HMTL-dokumendi kohale. Vastasel juhul, kui külastaja hõljutab kursorit menüü kohal, lükkab ta ülejäänud dokumendi leheküljelt alla, et loendile ruumi teha. Seda teeb positsioonielemendi määramine absoluutseks.
Kood positsiooni määramiseks on:
#tilk1{positsioon:absoluutne;}
See on kõik, mida rippmenüü CSS-i osa jaoks vaja läheb. Ülejäänud CSS-i rippmenüü luuakse HTML-dokumendis, kasutades elemente “div”, “id”, “class”, “li” ja “ul”. Märgend “div” eraldab dokumendi menüüosa. Tüüp
Kui avate dokumendi veebibrauseris, kuvatakse CSS-i rippmenüü lehel ühe üksusena. Kui liigutate kursorit ülemise üksuse kohal, kuvatakse ülejäänud menüü. Ülejäänud tekst lehel ei liigu, vaid osa peidab menüü.