Lai sakārtotu izvēlni guleniski, var izmantot tabulas. Ja netiek atbalstīti stili, tad tā ir vienīgā iespēja kā izveidot gulenisku izvēlni. Šāda pieeja neatļauj izveidot izlecošas apakšizvēlnes.
Pirmajā piemērā redzams, kā izskatās šada izvēlne izmntojot noklusētos iestādījumus:
<table> <tr> <td> </td> <td><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></td> <td><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></td> <td><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></td> <td><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></td> <td><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></td> <td><a href=stili.07.shtml#5 title="Sestā izvēlne">Sestais</a></td> <td><a href=stili.07.shtml#6 title="Septītā izvēlne">Septītais</a></td> <td> </td> </tr> </table>
| Pirmais | Otrais | Trešais | Ceturtais | Piektais | Sestais | Septītais |
Izmantojot stilus šo izvēlni iespējams padarīt daudz pievilcīgāku.
Lai iekrāsotos visa tabulas šūna, tiek izmantots parametrs „display: block;”
<table width=100% border=1 cellpadding="1" cellspacing="1"> <tr class=josla> <td class=malas> </td> <td class=pogas_1><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></td> <td class=pogas_1><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></td> <td class=pogas_1><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></td> <td class=pogas_1><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></td> <td class=pogas_1><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></td> <td class=pogas_1><a href=stili.07.shtml#6 title="Sestā izvēlne">Sestais</a></td> <td class=pogas_1><a href=stili.07.shtml#7 title="Septītā izvēlne">Septītais</a></td> <td class=malas> </td> </tr> </table>
| Pirmais | Otrais | Trešais | Ceturtais | Piektais | Sestais | Septītais |
Izmainot tabulas parametrus, viegli mainīt attālumus starp „pogām”:
<table width=100% border=0 cellpadding="4" cellspacing="4">
| Pirmais | Otrais | Trešais | Ceturtais | Piektais | Sestais | Septītais |
<table width=100% border=0 cellpadding="0" cellspacing="0">
| Pirmais | Otrais | Trešais | Ceturtais | Piektais | Sestais | Septītais |
Izmantojot stila lapas par gulenisku izvelni var pārtaisīt arī sarakstu.
Šīm vajadzībām tiek izmantots parametrs „display: inline;”
<ul class=izvelne> <li><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></li> <li><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></li> <li><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></li> <li><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></li> <li><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></li> <li><a href=stili.07.shtml#6 title="Sestā izvēlne">Sestais</a></li> <li><a href=stili.07.shtml#7 title="Septītā izvēlne">Septītais</a></li> </ul>
Ja netiktu izmantoti attiecīgi nodefinētie stili, butu redzms vienkāršs saraksts:
No daudzpakāpju saraksta var izveidot arī izlecošās izvēlnes.
Šīm vajadzībām tiek izmantots parametri „visibility: hidden;” un „visibility: visible;”.
<ul class="salikta-izvelne"> <li class="apaksizvelne"><a href=stili.07.shtml#1>Pirmais</a> <ul> <li><a href=stili.07.shtml#1.1>Pirmais:Pirmais</a></li> </ul> </li> <li><a href=stili.07.shtml#2>Otrais</a></li> <li class="apaksizvelne"><a href=stili.07.shtml#3>Trešais</a> <ul> <li><a href=stili.07.shtml#3.1>Trešais:Pirmais</a></li> <li><a href=stili.07.shtml#3.2>Trešais:Otrais</a></li> <li><a href=stili.07.shtml#3.3>Trešais:Trešais</a></li> <li><a href=stili.07.shtml#3.4>Trešais:Ceturtais</a></li> <li><a href=stili.07.shtml#3.5>Trešais:Piektais</a></li> <li><a href=stili.07.shtml#3.6>Trešais:Sestais</a></li> <li><a href=stili.07.shtml#3.7>Trešais:Septītais</a></li> <li><a href=stili.07.shtml#3.8>Trešais:Astotais</a></li> <li><a href=stili.07.shtml#3.9>Trešais:Devītais</a></li> </ul> </li> <li class="apaksizvelne"><a href=stili.07.shtml#4>Ceturtais</a> <ul> <li><a href=stili.07.shtml#4:1>Ceturtais:Pirmais</a></li> <li><a href=stili.07.shtml#4:2>Ceturtais:Otrais</a></li> <li><a href=stili.07.shtml#4:3>Ceturtais:Trešais</a></li> </ul> </li> <li class="apaksizvelne"><a href=stili.07.shtml#5>Piektais</a> <ul> <li><a href=stili.07.shtml#5:1>Piektais:Pirmais</a></li> <li><a href=stili.07.shtml#5:2><img src=/atteli/mazini/Dzivnieki/kaija.gif width=86 height=37 border=0></a></li> <li><a href=stili.07.shtml#5:3>Piektais:Trešais</a></li> <li><a href=stili.07.shtml#5:4>Piektais:Ceturtais</a></li> </ul> </li> </ul>
Atceries, ka izlecošajai izvēlnei tiek parādīta tikai tā daļa, kas ietilpst redzamajā logā.
Izmantojot stilus par izvēlni var pataisīt jebkuru tekstu, arī rindkopas:
<p class=pogas_3><a href=stili.07.shtml#1>Pirmā</a></p> <p class=pogas_3><a href=stili.07.shtml#2>Otrā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.1>Otrā:Pirmā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.2>Otrā:Otrā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.3>Otrā:Trešā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.4>Otrā:Ceturtā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.5>Otrā:Piektā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.6>Otrā:Sestā</a></p> <p class=pogas_4><a href=stili.07.shtml#2.7>Otrā:Septītā</a></p> <p class=pogas_3><a href=stili.07.shtml#3>Trešā</a></p>
Lai veidotu statenisku izvēlni ar izlecošām apakšizvēlnēm, jālieto daudzpakāpju saraksti:
Pievērsiet uzmanību tam, ka saraksta rindiņai, kurai pakārtota izlecošā izvēlne (jauns apakšsaraksts), kur atrodas noslēdzošā komandas </li>.
<div class="menu"> <ul> <li><a href=stili.07.shtml#1>Pirmā</a></li> <li><a href=stili.07.shtml#2>Otrā »</a> <ul> <li><a href=stili.07.shtml#2.1>Otrā:Pirmā</a></li> <li><a href=stili.07.shtml#2.2>Otrā:Otrā</a></li> <li><a href=stili.07.shtml#2.3>Otrā:Trešā »</a> <ul> <li><a href=stili.07.shtml#2.3.1>Otrā:Trešā:Pirmā</a></li> <li><a href=stili.07.shtml#2.3.2>Otrā:Trešā:Otrā</a></li> <li><a href=stili.07.shtml#2.3.3>Otrā:Trešā:Trešā</a></li> </ul> </li> <li><a href=stili.07.shtml#2.4>Otrā:Ceturtā</a></li> <li><a href=stili.07.shtml#2.5>Otrā:Piektā</a></li> <li><a href=stili.07.shtml#2.6>Otrā:Sestā</a></li> <li><a href=stili.07.shtml#2.7>Otrā:Septītā</a></li> </ul> </li> <li><a href=stili.07.shtml#3>Trešā</a></li> </ul> </div>
Stateniskām izvēlnēm papildus jādefinē klašu parametri, lai neparādītos nevajadzīgi tukšumi starp rindiņām.
Jāņem vērā ka „izlecošās” izvēlnes šādā izpildījumā «Microsoft Internet Explorer» pārlūkos nedarbojas līdz pat 10. versijai ieskaitot. Tikai sākot no 11. versijas «IE» sāk ievērot CSS standartus. Savukārt 11. versija ir pieejama tikai sākot no «Microsoft Windows 7».
Tākā ieprēšojos piemēros redzamajām izvēlnēm tika izmantots notikums „hover”, tad apakšivelnes parādījās tiko kā pele novietojās virs atbilstošās izvēlnes.
Izņēmums ir dažādas mobilās ierīces, planšetdatori un citas skārienjūtīgo ekrānu ierīces, kuros „hover” pēc noklusējuma tiek aizstāts ar klikšķi.
Līdzīgi strādājošu izvēlņu izveide parastos datoros nav tik vienkārša, kā „izlecošās” izvēlņu izveide.
Viena iespēja ir izmantot izvēles rūtiņa ne gluži tā, kā tas sakotnēji HTML valodā bija paredzēts (dažādus paraugus var meklēt pēc „checkbox hack”). Te aplūkojms vienkāršs piemērs.
