menu

Hello,

I'm creating a website using wordpress + Canvas theme, and I'm doing a lot of CSS customization in the menu area. Right now, I have two problems.

1. I can't center the main menu (Yoga, Music, Food, Body...) vertically over its background.

2. The CSS properties I applied work normally on Google Chrome, but on Firefox they don't. And I haven't seen how it is on IE.

Does anyone know what I should do to fix these problems?

Thanks so much in advance. I literally tried everything I could before asking your help. Any help is really really appreciated.

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.

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.

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;
}

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?