Cascading Style Sheets (CSS) är ett namn som används för att beskriva hur ett Hyper Text Markup Language (HTML) eller Extensible Markup Language (XML)-dokument formateras. Det kan användas för alla typer av XML-dokument, men det används oftast med webbsidor skrivna i HTML. CSS kan användas för att skapa rullgardinsmenyer på webbsidor. Rullgardinsmenyer för CSS har ett enda textobjekt som visas tills besökaren använder musen för att hålla muspekaren över menyn, varvid hela listan med objekt visas. Menyn skapas med hjälp av CSS-identifiering och klasstaggar.
Rullgardinsmenyer för CSS börjar med ID-väljaren. Den här väljaren ser ut som #. Det följs av namnet på ID:t. Du kan namnge ID:t vad som helst, men det bör vara beskrivande så att andra kan läsa din kod. Till exempel kan en rullgardinsmeny använda koden #drop1.
Skapa klassen för det första objektet i rullgardinsmenyn med hjälp av klassväljaren, som ser ut som en punkt. Klassen kommer att vara en del av HTML-listelementet. Listelementet betecknas med tecknen ”li.” Skapa toppnivåklassen genom att skriva ”li.top.” Klassbeskrivningen finns mellan två lockiga hängslen.
Följande exempel visar hela CSS-koden för det första objektet i listan:
#drop1 li.top {font-family: Verdana, Genève, san-serif;
teckenstorlek: 100%;
färg: #FF00FF;}
Skapa sedan en klass för objekten som kommer att döljas under det första objektet i CSS-menyn. Klassen kommer att beskriva den oordnade HTML-listan, som betecknas med tecknen ”ul.” Beskrivningen kommer att se i princip likadan ut som menyalternativet på översta nivån, med tillägg av orden ”display:none#59” i början av beskrivningen. Detta indikerar att objekten i den oordnade listan kommer att döljas tills pekaren svävar över rullgardinsmenyn för CSS.
Följande är ett exempel på den här delen av CSS-koden:
#drop1 ul.link {
display:none#59
teckensnittsfamilj: Verdana, Genève, san-serif;
teckenstorlek: 100%;
färg: #FF00FF;}
Du kommer att vilja att rullgardinsmenyn CSS visas över resten av HMTL-dokumentet. Annars, när besökaren svävar över menyn, kommer den att trycka ner resten av dokumentet på sidan för att göra plats för listan. Att ställa in positionselementet till absolut, kommer att göra detta.
Koden för att ställa in positionen är:
#drop1{position:absolute;}
Det är allt som behövs för CSS-delen av rullgardinsmenyn. Resten av rullgardinsmenyn för CSS skapas i HTML-dokumentet med hjälp av elementen ”div”, ”id”, ”class”, ”li” och ”ul”. Taggen ”div” separerar menydelen av dokumentet. Typ
När du öppnar dokumentet i en webbläsare visas rullgardinsmenyn för CSS som ett enda objekt på sidan. När du flyttar musen över det översta objektet visas resten av menyn. Resten av texten på sidan kommer inte att flyttas, men en del kommer att döljas av menyn.