Kompetens HTML kód és egyszerű CSS szabályok segítségével létrehozhat egy felugró menüt, kiegészítheti és módosíthatja. A lépcsőzetes táblázatok és a jelölőnyelvi eszközök használatával biztosíthatja, hogy maga a menü megfelelően működjön minden böngészőben.
Utasítás
1. lépés
Először tartsa meg az alapmenüsort. Hozzon létre egy speciális számozott listát egy almenüvel a szövegszerkesztőben. Ezekre a célokra általában a "Jegyzettömb" -t használják. Az almenü a szülőlista elemeként működik. Például: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
2. lépés
Mentsd el ezt a listát külön HTML fájlban. Ezután hozzon létre egy.css fájlt. Adja meg az összes szükséges stíluslap-paramétert. Tegye ezt nagyon óvatosan, mert egy hiba, és az előugró menü nem jelenik meg megfelelően, vagy egyáltalán nem fog működni.
3. lépés
Távolítsa el a felsoroláslistában alkalmazott golyókat és kitöltéseket. Állítsa be a menü szélességét a CSS eszközök segítségével: ul -style: none; width: 200px; }
4. lépés
Jelölje meg a lista összes elemének relatív helyzetét a position nevű attribútummal: ul li: relatív; }
5. lépés
Ezután rendezze az almenüt, amelynek elemei a szülő menüből jobbra jelennek meg, amikor az egér kurzora az elem fölé kerül: li ul: abszolút; bal: 199px; felső: 0; kijelző: nincs; }
6. lépés
A bal oldali attribútum egy pixellel kevesebb, mint maga a menü. Ez lehetővé teszi az előugró elemek megfelelő elhelyezését kettős szegélyek létrehozása nélkül. A display attribútum az almenü elrejtésére szolgál az oldal megnyitásakor.
7. lépés
Stílusolja a linkeket szükség szerint a megfelelő css opciók használatával. Tartalmazza a display: block paramétert, hogy a linkek a számukra fenntartott helyet lefoglalják. Ahhoz, hogy a menü akkor jelenjen meg, amikor az egér kurzora lebeg rajta, írja be a következő kódot: li: hover ul: block; }
8. lépés
Állítson be további opciókat a listaelemek és hivatkozások kívánt megjelenítéséhez. Vegyen fel egy attribútumot a.html fájlba. Az előugró menü használatra kész.
