Click dropdown menu instead of hover using just CSS?

Hi all.

I currently have a hover dropdown menu but want it to be clickable. This is what I currently have;

http://jsfiddle.net/0bnz4mog/

So that the dropdown will only come when you click on the top button.

Want to keep it simple and just CSS, is this possible?

This guy created it but can't figure out how he did it. http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html

Thanks in advance for any help.

Drop Down Menu Text Showing Behind Photos

I've tried changing the z-index but nothing is changing?? On Chrome the menu appears normal though on other browsers such as Safari it's hiding behind the gallery images (not the home page slider) Maybe someone can help because I've done as much I can think of, thanks heaps !

my website is - White Boda Wedding Photography and you can see when you visit 'photography' you'll see the menu hides behind the gallery.

Wordpress Sub Menus Disappearing On Hover?

It never ends... I'm working on another Wordpress theme and I have the submenus styled exactly how I want them. However, they disappear upon hover. I have set all of my margin-tops to zero as stated on Stack previously but they still don't work properly. Here's the link to the site: tinyurl.com/ku6mlx7. Dropdowns can be seen under Artists.

My CSS is the following:

.top-nav {
background-color: #444;
min-height: 40px;
}
 
.top-nav ul {
margin-bottom: 0;
}
 
.top-nav li {
margin: 0 20px 0 0;
padding: 0;
float: left;
display: inline-block;
position: relative;
}

Navigation menu get overlapped when i resize browser window

Hi,
I have created a navigation menu.My code is here.The problem is when i resize the browser window the menus get overlapped.I used min-width and max-width property.But no use.I'm new to css. When i google it i found of using media elements,i tried.But no luck.I think i'm not using it in the appropriate place.Can anyone suggest me how to fix it?

CSS stylesheet issue. Responsive Nav bar font color not responding

I'm working on a responsive layout and it has two different menu layouts, standard and mobile. I can't seem to get the font color to change on the current page link in the main(2nd) navigation menu. I can set the back ground of the current/active page, and it works in both menus; however when I change the font/link color it only changes in the mobile menu. I have searched and can't seem to find the reason this happens or a solution. IDK if the issue is in the css or the header.

Here's the page:

Syndicate content