Laba diena,
Cenšos izveidot šādu izvēlni:
Ja nerādās attēls, tad: Saite
Problēma ir tāda, ka vēl neesmu atradis risinājumu (skatīt zemāk mēģinājumus), kas strādātu tā, kā iecerēts un uz visiem pārlūkiem.
Svarīgas piebildes:
1. Pogām NAV fiksēts izmērs, tās staipās atbilstoši teksta izmēram:
2. Tekstam pogā jābūt novietotam apakšā
3. Uzejot ar bultiņu uz pogas, zem tās parādās apakšizvēlne
Nedaudz par risinājumiem, kurus esmu mēģinājis.
1. Risinājums bez tabulām (<table>), izskatās aptuveni šādi:
<ul id="menu">
<li id="button"><a ...><div ...>Poga 1</div></a></li>
...
<li id="button">
<a ...><div ...>Ļoti liela poga 3</div></a>
<ul id="submenu3">
<li>... 3.1 ...</li>
<li>... 3.2 ...</li>
</u>
</li>
</ul>
Šeit vislielākā grūtības sagādā pogas teksta novietošana apakšā.
Var izmantot <a> tagam "display:table-cell" + "vertical-align:bottom", taču Internet Explorer <= 7. versiju neatbalsta 'display: table ...'
<a> tagam uzliekot 'position:relative;' un tekstam 'position:absolute;bottom:0;' novieto tekstu apakšā, taču tad tas vairs nestaipa pogu un iet pāri robežām.
2. Variants - tabula, apmēram šādi:
<table>
<tr>
<td>...pogas 3 kreisā mala...</td>
<td>
...pogas 3 vidus...
<ul id="submenu3"></ul>
</td>
<td>...pogas 3 labā mala...</td>
....
</tr>
</table>
Taču šeit rodas problēmas ar apakšizvēlnes novietošanu zem attiecīgās pogas ...
Varbūt kāds ir veidojis kaut ko līdzīgu un var padalīties ar idejām?