Hvordan opretter jeg drop -down CSS -menuer?

Cascading Style Sheets (CSS) er et navn, der bruges til at beskrive, hvordan et hypertekstmarkup -sprog (HTML) eller Extensible Markup Language (XML) -dokument er formateret.Det kan bruges til enhver type XML -dokument, men det bruges oftest med websider skrevet i HTML.CSS kan bruges til at oprette drop -down -menuer på websider.Drop down CSS -menuer har en enkelt tekstelement vist, indtil den besøgende bruger musen til at svæve over menuen, på hvilket tidspunkt hele listen over varer vises.Menuen oprettes ved hjælp af CSS -identifikation og klassemærker.

Drop down CSS -menuer starter med ID -vælgeren.Denne vælger ligner #35;.Det efterfølges af navnet på ID.Du kan navngive ID noget, men det skal være beskrivende, så andre kan læse din kode.For eksempel kan en rullemenu bruge koden #35; drop1.

Opret klassen til det første element i rullemenuen CSS ved hjælp af klassevælgeren, der ligner en periode.Klassen vil være en del af HTML -listeelementet.Listeelementet er udpeget af tegnene Li.Opret klassen på øverste niveau ved at skrive li.top.Klassebeskrivelsen er indeholdt mellem to krøllede seler.

Følgende eksempel viser hele CSS-koden for det første element på listen:

#35; drop1 li.top #123; font-familie #58;Verdana, Genève, San-serif #59;
Font-størrelse #58;100%#59;
Farve #58;#35; FF00FF #59; #125;

Næste skal du oprette en klasse til de varer, der vil blive skjult under det første emne i CSS -menuen.Klassen vil beskrive den HTML -uordnede liste, der er udpeget med karaktererne UL.Beskrivelsen ser i det væsentlige den samme ud som menupunktet på øverste niveau, med tilføjelsen af ordene Display #58; Ingen#59 i begyndelsen af beskrivelsen.Dette indikerer, at elementerne på den uordnede liste vil være skjult, indtil markøren svæver over rullemenuen CSS.

Følgende er et eksempel på denne del af CSS-koden #58;

#35; drop1 Ul.Link #123;
Display #58; Ingen#59
Font-Family #58;Verdana, Genève, San-serif #59;
Font-størrelse #58;100%#59;
Farve #58;#35; FF00FF #59; #125;

Du vil gerne have, at rullemenuen skal vises over resten af HMTL -dokumentet.Ellers, når den besøgende svæver over menuen, skubber den resten af dokumentet ned på siden for at give plads til listen.Indstilling af positionselementet til absolut, vil gøre dette.

Koden til indstilling af positionen er #58;

#35; drop1 #123; position #58; Absolutmenu.Resten af rullemenuen CSS er oprettet i HTML -dokumentet ved hjælp af DIV, ID, klasse, LI og UL -elementer.DIV -mærket adskiller menudelen af dokumentet.Type #60; div id ' drop1 #62;Sådan oprettes rullemenuen.Start derefter den uordnede liste ved hjælp af HTML UL -elementet.

Tilføj topklassen til den første listeelement, og linkklassen for resten af varerne.HTML -koden skal ligne:

#60; div id ' drop1 #62;

#60; li class ' top #62; top vare #60; #47; li #62;

#60; li class ' link #62; #60; a href '##62; vare #60; #47; A #62; #60; #47; Li #62;
#60; li class ' link #62; #60; a href '##62; vare #60; #47; a #62; #60; #47; Li #62;
#60; li class ' link #62; #60; a href '##62; vare #60; #47; A #62; #60; #47; Li #62;
#60; #47; Ul #62;#60; #47; DIV #62;

Når du åbner dokumentet i en webbrowser, vises rullemenuen som et enkelt emne på siden.Når du flytter musen over det øverste emne, vises resten af menuen.Resten af teksten på siden bevæger sig ikke, men en del vil blive skjult af menuen.