Buongiorno a tutti.
Ho scritto il seguente codice html, javascript e css:
esso mi permette di costruire un menu orizzontale.codice:<html> <head> <script type="text/javascript"> function apriMenu(menu) { document.getElementById(menu).style.display = "block"; } function togliMenu(menu) { document.getElementById(menu).style.display = "none"; } </script> <style type="text/css"> .menuBar { background: #000FFF; height: 40px; text-align: right; } .menu { width: 150px; height: 40px; border-left: #FFFFFF 1px solid; text-align: center; } .sottomenu { position:absolute; width: 110px; background: #0000FF; font-size: 14; } a.menuLink { font-family: Tahoma; font-size: 14px; font-weight: bold; text-decoration: none; color: #FFFFFF; } </style> </head> <body> <div class="menuBar" width="100%"> <table border="0" align="right" valign="center" cellpadding="0" cellspacing="0"> <tr> <td class="menu" valign="center"> Menu1</td> <td class="menu" valign="center"> Menu2</td> <td class="menu" valign="center"> Menu3</td> </tr> <tr> <td> <div id="menu1" class="sottomenu" style="display:none"> sottomenu 1.1 sottomenu 1.2 sottomenu 1.3 </div> </td> <td> <div id="menu2" class="sottomenu" style="display:none"> sottomenu 2.1 sottomenu 2.2 sottomenu 2.3 </div> </td> <td> <div id="menu3" class="sottomenu" style="display:none"> sottomenu 3.1 sottomenu 3.2 sottomenu 3.3 </div> </td> </tr> </table> </div> </body> </html>
Il problema è sul css con class = menuLink
Quando inserisco menuLink: link{} menuLink: visited{} e menuLink: hover{}
perdo tutte le impostazioni del menuLink generale e non mi tiene valide neanche quelle dei singoli menuLink: ...
Ho fatto qualcosa di strano? Devo modificare qualcosa?
Grazie a tutti per l'aiuto