CSS Hover Effect Multi-level drop-down menu that’s built entirely with CSS (without any JS). More: • Drop-Down Menus, Horizontal Style • Elegant Drop Menu with CSS only • GRC’s Script-Free Pure-CSS Menuing System • Tutorial: CSS Multilevel Dropdown Menu
HI,
I put the menu onto my website but the sub categories appear "underneath" content on the main page so you cannot read half of it. How do I get it to appear on the "top"
Ann StringerOctober 26, 2011
I read through all of the posts on here looking for a solution to the centering problem. Some of the solutions are very old and the items they wanted me to modify no longer exist while others (the newer ones) simply do not work... not even a little bit.
This modification comes from menus I created a week ago and this works on all browsers including IE9.
1) Create a table to contain the <ul> and <li> entries.
2) Set the table parameters as follows:
<table border='0' align='center' class='pureCssMenu'>
3) Do NOT set a width for the table or the <td>
4) Set the <td> to align='center'
The table has one row and one column and the column holds the <ul><li>.
The original .css has a style definition for pureCssMenu table that gets applied and, if you have an older version you can add that definition as follows:
ul.pureCssMenu table { border-collapse:collapse; }
The only other mod to make to the .CSS is this:
1) Find this block:
ul.pureCssMenu
{
display:block;
zoom:1;
float: left;
}
2) Remove the line that says: float: left;
3) Save all changes, upload to your server and you should have centered menus.
PeteOctober 21, 2011
I put the code on to my webpage and now i have this giant gap between my header and the first post. It's because of all the <br /> that are at the end of the code. When I remove them the drop downs no longer function??? Anyone know a solution?
Nicole JOctober 20, 2011
Very Very Nice! But would love to see alignment customization.
align left / center / right ???
Brandon GregoryOctober 19, 2011
Customizing and suffering, but many many thanks!!!!
PoncirriOctober 18, 2011
Thanks from Russia! This is good work!
DenisOctober 18, 2011
very very nice
naniOctober 17, 2011
I m New friend Of ur site & really Like that site & Hello My Friends My Name Is manish sharma
manishsharmaOctober 13, 2011
Great stuff! Thak you, people! Now all I have to know is how to give other coordinates for the menue, like top:300px, left:300px etc.
It would be great if somebody could answer this!
Cheers & thanks!
Die heilige EminenzOctober 12, 2011
Amazing! I needed something like this for teaching myself with css, thank so very much and more power! =)
chad15October 11, 2011
How can we get the menu background transparent, Thanks
Sivashankar.MSOctober 5, 2011
This is great. I appreciate the time you spent on this.
ShaunOctober 3, 2011
I love the new menu I created. However, my website is centered. How do I center the new menu that I just created?
Michael mcDonaldSeptember 23, 2011
GREAT program. Thanks! I would like to be able to add it to a large website. (building in iweb) Is there a way i can place the navbar on a single page and iframe to the rest of my pages. Then I only need to change one page each time i update the menu. Thanks for your help. Debbie
Debbie NaugleSeptember 20, 2011
Any way to make it display in a linear fashion?
Iggy MakarevichSeptember 19, 2011
Now working but not linear...
Iggy MakarevichSeptember 19, 2011
I put the list code on the page. I put the CSS in the CSS file for the page. It shows only the main list. No dropdown, no links within it are active. Just the main text. Why does it not work?
Iggy MakarevichSeptember 19, 2011
Hi, I am new and do not know how to code much. I too am having a hard time centering a horizontal drop down menu. I tried google this issue, and tried some CSS hacks, but since i am not much of a coder, i probably was not able to do it correctly. If someone can help me and post here, thank you!
s.chungSeptember 18, 2011
Alright this has been fixed with css margin-left: ;
mdsSeptember 18, 2011
Nice piece of software, thanks for this, please can you advice on how to center the generated CSS on a page instead of aligning left.
mdsSeptember 18, 2011
I have succeeded perfectly using the drop-down menu but I have a general IE issue. Some of the pages are made of a table in two rows. The menu is set on row one close to the border so that the drop-down effectively appears but hover row 2. In FF it works without any problem. With IE even version 9 the mouse makes the menu appear but as soon as you try to move it to a choice, the list of choices disappears. I made a test on a one single row and it is ok, the problem is when the hovering goes over two rows then it is unclickable. Thanks for any help in this
serge creolaSeptember 10, 2011
Thanks for this generator. Really saved my bacon.
Tom SalleySeptember 9, 2011
who to center menu in html page ?
Joao PauloSeptember 7, 2011
I'm trying to align a sub, sub menu a little to the left, but can't figure out how to change the coding. I'm new to css, so a simple answer would be most helpful. Here's a link to the page. Click on Works, then Series then the submenu under that. I would like Kharanditi's Circles and Tondolitos to overlap the Series block just a bit.
http://www.idyllwildpublishing.com/lorel/index2.html
Jim CrandallSeptember 5, 2011
the video tutorial requires the plugin. can anybody tell me how to watch this video
ranishSeptember 3, 2011
yeah! it was great to use and easy! Great job but then im looking for more templates but the rest TWO THUMBS UP
limahhongSeptember 1, 2011
Hi,
Please Help.
I want this DROP DOWN menu to DROP UP.
I cant get it work.
Regards,
Chiranth A
chiranthAugust 27, 2011
My submenus are cut off. Could you look at my source code and explain why?
http://www.bjorksten.com/Zen2b/index.html
BobAugust 23, 2011
I can't get it to work when making it a virtual include for an html site. Any suggestions from anyone? Using
<!--#include virtual="/shared/pageframework/menu/topnav.html" -->
I'm named the topnav.shtml since I know that is supposed to work.
Thanks-
Linda
LindaAugust 19, 2011
Chris-
I had to make a seperate style sheet just for the menu and it worked - go figure?
LindaAugust 19, 2011
My CSS header is not working on my site, when viewed with Internet Explorer. The code <!--[if gt IE 6]--> is showing up under each header item and I don't know how to fix it. Any solutions??
AriAugust 17, 2011
F*cking spammers!
Just registered and already 2 spam letters.
MiniAugust 17, 2011
Hello and thank you for a great app!
A couple of quick questions.
One - the generator places stylesheets inside the <body> tag instead of <head>, so was wondering if it is intentional.
Another is that it does not quite work if I place the stylesheet in the external file. The nested menu items get displayed outside of the menu display area. Any help would be greatly appreciated. I tried different linking methods with <link> and @import, but it only works if I use the stylesheet internally. Obviously, for a big site it would be nice to have it all in one file with multiple pages referencing it.
Thanks again for all your beautiful work!
LenaAugust 12, 2011
Can't seem to get it align to the center of the page... Please help!!!
chris cheamAugust 10, 2011
Oh...i really satisfied with their service. Its working
Thank you purecssmenu Team
PawanAugust 9, 2011
Great work.
e-changAugust 7, 2011
Correction, thanks to that Anonymous person!
Charles51August 4, 2011
Thanks to Paul: His comment was:
"Thanks to purecssmenu.com ! Great Job had some tough time fixing the Z-Index stuff now it works fine... Guys if your drop down menu is in the back ground of a div use z-index:1; in the second line of your css code.. #pcm{display:none;} ul.pureCssMenu ul{display:none;z-index:1;}"
HOWEVER: Don't assume a z-index of 1 will work, I had changing pictures using javascript that changed their z-index, I used 10 and it worked like a charm. Thanks again Paul!
Charles51August 4, 2011
This is GREAT! I've created the menu I need, but not sure how to put it in my website... I want to replace the existing text menu with this new one. How / Where do I place the code ?
Frank DayAugust 3, 2011
Is it possible to give the option to leave the blue out of the only rounded button in the templates. That is a pretty design, but the blue is not the right accent color. Thanks,
deedee7July 26, 2011
Obrigado pure css www.animesfusion.com.br
Alex FernandoJuly 25, 2011
how do you align your drop downs? i would like to center it, all your downloads place them to the left...help....
tJuly 20, 2011
Ciao, desiderei creare un menù verticale a scomparsa come quello generato dal vostro sito, mi sapete dire come fare? nella tabella a sinistra del mio sito http://speedy63.altervista.org
Grazie!!!
SalvatoreJuly 16, 2011
How can I center the drop down menu? Thanks!!
melJuly 11, 2011
If I link back to you guys and give you credit for this product, could I use this in a commercial CMS product?
Ben McDonaldJuly 4, 2011
Ange, i'm a little bit of a newbie to coding but, what i did in Frontpage is i created a layer and pasted the menu code in to the layer attributes of the webpage, and the <style> part of the menu code in to the header section of the sites code.
Not sure if this is the best way to go about it but it worked.
Hope that makes sence.
As for anyone having problems with IE8 try placing
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
After the <title> tag in the code, it might get IE to recognize the drop down features of the CSS code... if not i tried ^.^
edaeronJuly 1, 2011
Muito Bom! o/
Marcos PavianiJuly 1, 2011
Wow I love This button very Much
manish kumarJuly 1, 2011
Ok, I can open the Zip file and use my drop down menu, however, I cannot reposition it anywhere in my web page. Every time I try to move it, whether in the code, or just copy and paste, the menu always appears in the top-left corner of my page. How do I fix that?
Alex DoleckiJune 29, 2011
Hello
excuse me!
Can you help?
I use iWeb to create my site.
How do I use the menu that I created on my web page?
Thank you for your help.
Angel
angeJune 28, 2011
I just looked at the video tutorial again and found out how to download and also found out that if you go to another tab like this one "comments" before you save/download your menu, you loose everything. So like Arpit, I want to know how I can pull up my menu to tweak it if/when needed without having to recreate it all over again...Thanks
Wanda LoveJune 27, 2011
I'm in the same boat as Arpit. I just created a menu but had no option to save it so all my work is gone. How do you save your work?
Wanda LoveJune 27, 2011
Thanks a lot for this wonderful menu website....
it helped me a lot.....
but will you please let me know that how to save the menu in my account, so that i can recover it and reuse it again,
help....
Arpit GargJune 27, 2011
very good maker! I have some problems with dropdown-menu and now they are solved!
alexis15June 27, 2011
I Build an extensive menu bar, which works great.
Until I need to add an item to it. then comes to re-keying the whole thing back in again.
And after two or three tries I get it right.
On the profile page it looks like you might be able to save a template or menu bar.
But I can find no place to do that.
Can you tell me how to save my work to go back and make changes?
John KellumJune 26, 2011
Same issue here, in IE8 drop down menu will not work, also the menu bar appears cut in half almost from the bottom, not a huge issue with the cutting but it doesn't look as good.
It doesn't seem to have to many issues in Chrome, and i haven't had a chance to test in other browsers like Firefox or Safari yet but i will later on. Any fixes for the IE8 issue with drop down menus though?
edaeronJune 25, 2011
I have a problem with Drop Down function, it not working to IE 8, anybody can help?? It just working only for IE 6, so not all of them using IE 6 anymore,.. please help me..
mastersuseJune 24, 2011
Thanks so much for this fab method!
PLEASE PLEASE (x3) someone be so kind to let me know if I can make the SUBMENUS HORIZONTAL instead of VERTICAL without causing browser conflict???? !
THX x3 AGAIN!!! =D
Greta BonsemaJune 20, 2011
Hi I love the site and the generator. The only negative would be that the navigation isn't accessible for people using screen readers as you can't use the tab key to highlight and select through the menus.
BradJune 20, 2011
thank you, great help
Mazed KhanJune 16, 2011
Dear Web Admin and everyone:
It seems very helpful to create a drop down Menu using this. I surely can apply this to my homepage. Anyway, it's done smoothly on the Server to see the drop down menu, but client PC cannot see the drop down Menu. They can see only the Main Title only.
Hope I can get the solution to this problem. Please help recommending me if anyone knows how to solve this problem.
Thanks!
Makara Ngy
Ngy MakaraJune 10, 2011
this site and this menu is Da Bahm! i have *no complaints* about the menu's you have generated for me.
thanks tons! and why isn't there a "donate" button? hmm?
/* happy happy happy */
yvette hirthJune 9, 2011
How do I get my menu to center? The index page is at http://www.raredrop.com/ Thanks for the help!
Rare Drop MediaJune 8, 2011
Love this program.. easy and nice looking results for sure! I have a problem as I added this to my blog, everything worked fine. However, when you click on gallery the drop down menu hides behind posts section and you can't see it or choose it. Can anyone help me? My email address is jennlynnmuncy@aol.com
Below is the blog to look at...Thank you in advance
http://faithsimmons1.blogspot.com/
Jennifer WattersJune 8, 2011
nice app!!!! =)
JuanCerJune 7, 2011
super appu
karthikJune 3, 2011
- Can't save current menu to come back to later
- State of menu doesn't persist across all tabs in purecssmenu.com
- CSS selectors oddly named, code makes no sense once generated.
- Doesn't "play well" with other CSS code, even correcting for namespace collision.
- Menus only seem to work well when the menus are the first thing you work on with your site, followed by coding other CSS classes, IDs, and selectors. Don't try to integrate this impossible-to-understand code into an existing site.
Not worth anyone's time.
RobMay 31, 2011
Hi,
I Generated A CSS Menu But It Takes too Many Place on Web Page.And My Other Link is not Opening.Is There Any Method to Short This Menu Size?
Danish AnsaariMay 27, 2011
waoooo kerennnnnnnnnnnnnnnnn!!!!!!!!!
trims
seetyMay 26, 2011
I saw so many questions on "how do you center the menu?"-- I finally found the answer. In the HTML code where you "item#" (item #1, item#2 for the menu), change <div> to <div id ="centered menu">
Now just paste this below the <style> section- presto!
#centeredmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
text-decoration:none;
line-height:1.3em;
}
CREDIT/MANY THANKS TO: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
SeventierMay 22, 2011
great, i just lost my entire menu while trying to download it. luckily i registered my account to a 10minutemail.com temporary account so that you can't spam me with more crappy products
bob dobbsMay 21, 2011
Kevin - May 14.
Open up your downloaded file in a web browser. Once open, right click and select view page source.
Your code is now visible. You can either put the Styles code in an external css file and link to it, or use it on your page.
The Menu section - bottom half of the code - should be positioned in your html code where you want it on your web page.
Hope this helps
David H
David HughesMay 20, 2011
please teach me how to unable the part where you click on the link, it just pops out a new tab. i want my webpage all on the same tab. help!
annaMay 19, 2011
I'm not seeing the code in the download? What am I missing? Thanks!
karenMay 18, 2011
Download this with problems, they could fix, please!
AltevirMay 18, 2011
hi,
I'm using your generator, but i've got a problem with internet explorer ... this is normal ? What is the solution ?
Thanks
bertilleMay 17, 2011
hello sir..
how i use this menu in my template..
plz tell
thanks
sahilmadanMay 17, 2011
I have enlarged the width to my menu bar, from 100% to 300%. I have added 6 items to on this bar. After the enlargement the items are not centered anymore. I'm able to see only three of this items whick of course the are misaligned and are separated by a big gap. Does any body can help me with this issue?
Thanks
TRIM ONNMay 15, 2011
I don't see the actual code in the download... any help?
KevinMay 14, 2011
absolutely brilliant! No other words to describe it
Steve ReddinMay 14, 2011
This is so cool. I love it.
npu_hillMay 12, 2011
Just wanted to say this is an amazing site and you saved my life! Well just a lot of time mostly lol.
edaeronMay 10, 2011
Hi, I'm showing a side and top navigation menu bar. How do I remove the side navigation menu?. Thanks
Kevan KnowlesMay 10, 2011
Excellent Site for a free nav menu!
JakeMay 10, 2011
Worked on Catagories and links for 4 hours, Logged me off, Lost everything, A reason why it is free.
KENNEI 
2010г.
