Pixelworkshop supports this item


This author's response time can be up to 2 business days.

35 comments found.

First off, great job on the menu! I really enjoy it and think it looks great and is well thought out. I do have one question however…

How can I disable the main links as appearing clickable (i only want the sub menu to be clickable) without messing up the drop down trigger? I hope my my question makes sense.

Thanks a bunch!

Hello and thanks for using my work ! I’m not sure to understand, the whole menu works on mouse hover and not on click…


Can I use this menu as Vertical ?? Please tell me ASAP

Hello, that’s possible but not directly, you’d need to customize the CSS for that.

auch…ok…i’ll give a try…hope this is easier than it sounds

Alternatively I have a couple of vertical menus in my portfolio :)

have a issue with the nav in IE10 and iphone in IE10 on any nav drop down in also opens the first drop down (CALENDAR of EVENTS) and on the mobile site it does the same but also shows the the drop down without clicking on the nav button. url is [link removed]

Hello, the issue happens because you reused the same FOR and ID values several times, for example your first 2 elements have this code :

<label for="menu-dropdown-1b" class="parent">CALENDAR of EVENTS</label>
<input type="checkbox" ... id="menu-dropdown-1b">


<label for="menu-dropdown-1b" class="parent">YARD SALES</label>
<input type="checkbox" ... id="menu-dropdown-1b">

Notice the duplicated value menu-dropdown-1b used for both elements.

The FOR value of the label must match the ID of the input. And for each element of your menu you should use a different value, here’s an example with your 2 elements :

<label for="menu-dropdown-1a" class="parent">CALENDAR of EVENTS</label>
<input type="checkbox" ... id="menu-dropdown-1a">
<label for="menu-dropdown-1b" class="parent">YARD SALES</label>
<input type="checkbox" ... id="menu-dropdown-1b">

In the code above I’ve used menu-dropdown-1a and menu-dropdown-1b to make each pair unique.

Actually the FOR and ID values are completely up to you, you could also have this :

<label for="element1" class="parent">CALENDAR of EVENTS</label>
<input type="checkbox" ... id="element1">
<label for="element2" class="parent">YARD SALES</label>
<input type="checkbox" ... id="element2">

I guess that this happened because you probably duplicated the markup to add menu items, so as long as you change those values, you should be fine :)

Thanks. I was freakn out

Hey, is this menu ready for Tablets and iphone, i mean the touch support?!

thank you dani

Hello, yes but without javascript :)

I bought yesterday CSS3 Multi Drop Down Menu and I think it’s a great job. But there is a bug running on mobile devices, specifically in Galaxy S2 and Galaxy Grand with Android, 4.1 and 4.2 In the Drop Down menu, is not the arrow on the right of the items that have submenus and when I do click on the item does not open the box, but the submenu is below the item. I have some screenshots and if you want I can send them to you Best regards

Creattica ? It’s not something in the default menu. Are you sure that you’re posting questions in the right comment section ? You don’t have any purchase badge for this menu so you could be posting in the wrong place…

Sorry. I bought CSS3 Mega Drop Down Menu, no Multi. I’ll post the problem in the right section. I apologize for my mistake

How difficult to implement full width?

Hello, the menu takes automatically all the horizontal space available, so if you put it in a container that has a width of 100%, the menu will inherit this same width.

Hi there….for some reason the menu is broken in IE8. I have it set up on a test page www.nscom.ie/ResponsiveTestSite but as you will see it basically doesn’t work. The only changes I have made is to change the labels and to take the dropdown off of the home page. Any help would be appreciated. Apart from the IE issue it’s a great piece of work, well done.

Hello, IE8 is not responsive by default so only adding a script like you did could make it.

Hi there…the problem wasn’t so much IE8 not being resonsive, more that the menu didn’t work at all in IE8 without the css3-mediaqueries script. It’s still not responsive but that’s OK as long as it works.

Well, it could be a problem related to your existing content, it’s hard to say. I’ve just re-tested on Explorer 8 (Windows XP) and everything works fine so far. But the most important is that you could fix it.

I’m really happy with your menu. It is very easy to integrate using your templates. I wanted a white background so that was a bit challenging to change the CSS but I got what I needed in the end.

I notice on my touch screen Windows 8 laptop there is a delay from when I tap a link and when the menu shows up. So long of a delay that I thought the menu function was not working at all. And then the menu will not stay open when your finger is removed which makes it impossible to click a sub-menu link. In that it’s a laptop it hardly matters, I can use the mouse. I’m concerned it could function like that on a tablet, however. I don’t have a way to test it on a tablet, unfortunately.

On my Android phone the menu opens immediately and stays open – that works nicely.

Any ideas about my Windows 8 touch screen?

Hello, this menu is tested on real tablets but I have no idea why it wouldn’t work properly on a laptop that has a touch screen…

Good to know. Thanks. I need to get myself a tablet! :)

Is there a way to center the menu horizontally?

Hello, do you mean centering the menu bar of the menu elements within the menu bar ? The first one is easily done by using a defined width and auto margins on the left and on the right.

Now centering the menu items within the menu bar is a bit more complex because you’d need to know the width they need. There are some “hacky” solutions for that but it’s something I haven’t tried…

Thank you! That worked. I hadn’t considered using a fixed pixel width but that works and I could then just adjust for the various screen sizes accordingly (in pixels not percent). Not 100% perfect alignment on all the browsers but close enough.

Is there a chance to see a working demo of this out in the wild? I purchased a different menu earlier this week but I think I want the full CSS version.

Hello, you can send me links preferably from my profile page. From your explanations, I suspect some kind of markup error, did you check your code with the validator ?

I am writing to close this thread…Pixelworkshop helped me solve my problem…completely my mistake in my html…nothing to do with the coding of the menu! Excellent menu and I am very satisfied!

Now, if I could get the menu selection to change color on hover :) Probably something else I have overlooked.

Alright, thank you very much :)

You can change the color on hover with this selector (it’s already in the CSS at the line 82) :

.responsive_menu a:hover,
.responsive_menu_container label:hover {
    color : ....

Hello. I am having trouble with the menu folding back together when I have an image/banner right above it on my mobile. any suggestions on what to do?

otherwise it works like a charm – very impreessive!

Hello, please send me a link from my profile page, it’ll be easier if I can see by myself the problem you’re having :)

Have a code to call the menu from php?

Can I change the main link color while drop menu is active. In other words, if I want to use blue for the not-active state of the primary links, and then on a hover have them turn white, and while the mouse is hovering over any drop-menu item the main menu would still be white. Currently, the moment I drag my mouse off the main menu item into the drop menu it returns to the a:link color. I want it to stay white until the mouse is no longer hovering over the drop menu.

Something like this maybe, it’ll affect only the color of the item within the menu bar and won’t change anything on children (the color #ff0000 is only for testing purposes, you can change it to anything else of course) :

.responsive_menu_container .responsive_menu > li:hover > a,
.responsive_menu_container .responsive_menu > li:hover > label {
    color: #ff0000;  

Yup. Works perfectly. Thank you!!

Hello. I really like this menu, it looks really great. I do have one question though. Is there a way to collapse drop-down menu in mobile version when another menu item is selected/checked? I am talking only about parent menu items. Some of them have submenus, and when i click on them, they do the drop down, but when i click on another parent menu item, the previous one doesn’t collapse back (i need to click on it again to make this happen).

Thanks again for the great menu :)

Hi, this is a CSS-only menu so it’s not possible unless you add some JavaScript I guess. Maybe doable only with CSS but it could be hacky…

Hi, I see this is 5 years old. Can anyone say if it still works on the latest browsers, Edge included?

Hi it doesn’t work on Edge on touch mode.

So it works with mouse?