How do I, Hide a CSS Flyout Menu until the main "See Navigation" is clicked

Hello everyone,

I have an interested one for you.

I have a pure CSS flyout menu that’s finished but now I want to a a bit of “zing” to it by making it hidden except for one top link (with style wrapped around it).

Example; you see


… and nothing else!

Once you click “SEE ALL DEPARTMENTS” it expands into a flyout menu like this…

Category 1 < (fly’s out on hover)
Category 2 < (fly’s out on hover)
Category 3 < (fly’s out on hover)

I’m imagining some sort of wrapper! But it’s currently pure CSS menu and I’d rather keep it that way (i.e. no javascript) so if you have an idea that’s CSS in nature please let me know…
Thank you…

Mozilla is actually REMOVING CSS functionality?! That’s the dumbest move I’ve ever heard of…

Indeed what Stomme says about :visited staying active for the duration of the session is the one restriction, but that’s the only way of doing what RBusiness wants without Javascript or some sort of server-side logic (clicking on the link will redirect the user to the same page with a query string that a back-end script can interpret)


Thank you! That is a excellent idea! I’m not having an ounce of luck making this work! Can you provide me some example code i.e .the line of css? (not a newbie either, can’t figure out why it’s not working, in any browser)…

@Stomme poes
I agree with your commentary! Sometimes things are necessary though!

I’m thinking now, that because of the limited use of this navigation, js might actually be an option! I don’t know js at all! PHP, HTML, CSS and DOS is where my brain stops! (DOS 6.22 to be exact lol anyone need any DOS 6.22 backup floppy disks? They’re free! LOL)…

You know… I’d like to revisit this! I’d like to find a way to take my flyout menu put it in a hover! Like amazon does! Same type of menu!

Starts likes this!

Hover over it and get

Category 1 <hover over flys out menu>
Category 2 <hover over flys out menu>
Category 3 <hover over flys out menu>
Category 4 <hover over flys out menu>

So no click, just a hover and a hover!

How bout that one? LOL

Holy crap, my first OS was DOS 6!

Is this a horizontal menu or a vertical menu? Are you aware of the HTMLdog-style of CSS for regular dropdowns?

You could first build the menu to hide/show on an additional :hover first, to see it working. Then you’d have to clear your cache and switch over to :visited. Since this only works once, the first time you click it, you’ll have to clear your cache (and history) again to go back to the default setting.

Mozilla considers it a security risk: if your browser shows :visited links a different colour, then obviously the browser remembers it was there. That means some forms of scripting attacks can use that to track where users have been. Something like that. :visited is only going to be allowed to have something like change of colour, background colour etc.

I notice they don’t have text-decoration listed. Arg.

Hm, Tommi, I did not think of using :visited! Kinda brilliant, except I believe Mozilla is planning on making Firefox ignore :visited or something for anything beyond colour changes or some such thing…

Leaving Mozilla aside, it does mean the dropdown will be there for the rest of the browser session. In general, anything you want to happen “on click” does indeed mean Javascript. Some browsers will leave the focus on a clicked item, and so for those you could use :focus style to have something appear onclick, however this does not work in Chrome or Safari, and so isn’t actually deployable real-world (I have seen cute tricks using it though).

I find the idea that people need to click even more times just to get to content a little irritating. It’s cute for something like an Easter Egg (some fun thing people can find if they spend some free time on the site), but this looks like a navigation menu. That means business. Dropdowns themselves are already on shaky ground when it comes to usability (depending on what you’re doing with them). Making an extra click necessary is scootching closer to the idea of the splash page (“are you sure you want to use this site? Really? Are you really sure boy? Huh boy? Are you really sure? Click here. Ok, do you still want to use this site? Huh boy, huh, are you sure?” “No thanks, I think I’ll just go to KMart”)

Is there a further reason for the initial click? If Tommi’s idea isn’t going to do what you want, and this extra click is still seen as necessary by you, you will have to use a bit of Javascript. Doesn’t have to be much though, and make sure your menu is onscreen and available for those without scripts (so have JS hide the menu onload, instead of having it hidden by default with JS showing it onclick).

You could try using an <a> wrapper (for IE support) with an inline block display and a fixed height, then with an a:visited rule set the new height to expose the rest of the contents. Not sure if this is the solution you are looking for…