CSS: visibility property en @media

[Tjolk]

Ik zit met een beetje vaag probleem waar ik de vinger niet achter krijg. In mijn navigatie bouw ik 2x een submenu op, wat uitgeklapt wordt bij een hover. De ene moet gebruikt wordt bij desktop view, de andere bij < 768px. Hiervoor heb ik het volgende gebruikt:

Cascading Stylesheet:

.navbar-default .dropdown-menu {
    visibility: hidden;
}

/* knippieknippie */

@media only screen and (max-width: 768px) {
     .navbar-default .dropdown-menu {
        visibility: visible;
        border: 10px solid #F00;
    }        
}

Het stomme is: het element wordt gewoon totaal niet zichtbaar. Als ik in de inspector van Chrome, Firefox, etc. kijk, dan wordt de hele eigenschap in de @media niet herkend voor dat element. Eerst dacht ik dat het misschien genegeerd werd en de eerste eigenschap (hier op regel 1) de boel overschrijft, maar ook die border die ik er t.b.v. testen opzet heeft 0,0 effect.

Andere bepalingen binnen de @media worden overigens wel gewoon uitgevoerd, alleen lijkt gewoon alles wat ik toeschrijf aan die navbar genegeerd.

For the record: ik gebruik Bootstrap navigation (te samen met de rest van Bootstrap natuurlijk)[/url]

Ik twijfel er bijna niet meer aan dat het aan iets stoms ligt wat ik over het hoofd zie, maar ik begin in cirkels te denken merk ik. Tips?

[Tjolk]

Goed, ik heb het probleem gevonden. Probleem bleek inderdaad iets stoms: ik had comments erboven staan als
// comment
ipv
/* comment */

Alles daaronder (wat alleen dit stuk dus was) werd logischerwijs genegeerd. Doh!

(wel stom dat Netbeans dit niet aanmerkt als syntaxfout, maar blijft natuurlijk mijn eigen stomme fout)

Iemand enig idee hoe ik deze vraag kan sluiten?

[ Voor 6% gewijzigd door Tjolk op 09-02-2016 11:32 ]

[Verwijderd]

Je kan beter bij het verbergen van het menu "display: none;" in plaats van "visibility: hidden;" gebruiken.
- visibility zorgt namelijk dat de div wel onzichtbaar is, maar de ruimte er wel is.
- display zorgt ervoor dat de div ook geen ruimte in neemt.

Als je display gebruikt hoef je alleen "visibility: hidden;" te vervangen door "display: none;" en kan je "visibility: visible;" weghalen.

[ Voor 22% gewijzigd door Verwijderd op 10-02-2016 20:23 ]

[Tjolk]

Ik ken het verschil. Maar vanwege andere afhankelijkheden had ik juist voor visibility gekozen.
Toch bedankt voor de input.