• Items
       
    • Parameters
    • Templates
         
      Preview
      Item Parameters
      Text?
      Link?
      Tip?
      Target?
       
      Create beautiful web menus and buttons! Download Free Trial!
      Awesome Web Menus! Superb Web Buttons! Try Now for Free!
      Awesome Web Menus! Superb Web Buttons! Try Now for Free!
      1. Pure CSS Drop-Down Menus
        Pure CSS Menu are lightweight – just a few kb in size, work on almost every known browser (Internet Explorer, Firefox, Opera, Safari, Mozilla, Chrome, Netscape Navigator, etc) – even those that have JavaScript turned off and one of the things I like the most: CSS menus are search-engine friendly! Also by Using Pure CSS Menu you can create CSS dropdown menus online for free without even having to know a single bit of CSS or HTML. There is no registration required, all you have to do is add the text to be displayed, the link where the user should be redirected after clicking the text and an optional tooltip. Obviously, being pure CSS, you can also customize it’s font type, size, font color or background (in normal state or on hover) and so on. Using Pure Drop Down CSS Menu , you can add as many multi-level submenu items as you want, select from some templates if you want to create your menu in seconds and also the menus can be either horizontal or vertical.

      2. A practical tool and - surprisingly - delivers exactly what we need, unlike most sites that deliver large files and poorly formatted. Pure CSS Menu code delivers a clean and relatively mild, including the rails for compatibility with Internet Explorer 6, known to not work right with the most advanced CSS. Although limit somewhat the scope for relying on the templates, the Pure CSS Menu is one of those sites that should be favorite for anyone working to create web. At a minimum, the service offered can save much time.

      3. A simple way to create horizontal and vertical drop down menus for your site without JavaScript, with CSS only, using PureCSSMenu online service.
        To create a drop down menu for your website we use the PureCSSMenu Online Service. We'll need to select the menu template, customize its appearance (using the visual editor), create the menu structure, and setup the links. Following these simple steps, we'll save the resulting code for horizontal or vertical drop down menu, then paste it into the appropriate place on your site. But first things first...

      4. Pure CSS Menu is for developers who are not very familiar with CSS syntax - or who can not really lose much time wrapped these codes. Using this omline menu generator, you can create menus of different levels of complexity, including hierarchical submenus.
        The site offers three tabs where you will define the details of your menu. In Items, You determine each link of the menu, and the hierarchy between them, a tree view similar to Windows Explorer. To edit the information in this item, the Item Parameters panel at the bottom of the screen is used. There, you can determine the text that will be shown on the menu, the Internet address where the item points out, a tooltip of the link, and whether it should be opened in the same tab or not.
        Parameters Tab. You can change the font and colors used in the menu. The alphabets available for the menu are those commonly used on the web, to ensure compatibility and stability of the layout. The change of colors can be made through the HEX code of the desired color, or by selecting it with the mouse on a color table. The colors listed in the left column are on the menu in a normal state, and the right refer to the menu items under the mouse pointer. From bottom to top, the color selection refers to the text, the background and border.
        The third tab allows you to select the Template for your menu. So far, the eight models are available, ranging from minimalist layouts horizontal to vertical menus very similar to the contextual menus in Windows. Css horizontal menu & css vertical menu. After selecting the template for the menu items and adjust their parameters and to best fit your project, simply click the download button and save the ZIP file. When you decompress this ZIP you'll find all HTML, css and image files required for the menu.

      5. クールなドロップダウンメニューをオンラインで作成 ダウンロードして使える「Pure CSS Menu」 かっこいいドロップダウンのCSSメニューを作りたいというとき、色々なところで作り方を調べたりするかと思います。
        そんなときに手っ取り早くクールなCSSメニューを作れてダウンロードして使えるサービスをご紹介。

      6. Pure CSS Menu: Build pull-down menus without javascript!
        How to install a Pure CSS Menu on Blogger?
        The file "purecssmenu-com.zip"Contains an HTML file and a folder with images. Its system concept is not complicated:
        1. Open file purecssmenu.html. It opens in a new tab in your browser.
        2. Once you open the tab, click on it with your right mouse button and select the option "View page source code. These are the relevant codes to be pasted into the template.
        3. The code CSS between labels...

      7. Сервис, позволяющий в визуальном режиме создавать выпадающие css меню , не использующие в своей работе java-скрипты. В наличии около 10 различных шаблонов меню, которые можно легко настроить под себя.

      8. Pure CSS Menu to bardzo przydatny generator online, który pozwoli nam stworzyć rozwijane menu w czystym css. Niesamowicie łatwo jest je skonfigurować, a następnie umieścić na własnej stronie. Możemy skorzystać z gotowych szablonów menu, lub stworzyć własny dostosowując kolorystykę i czcionkę do naszej strony. Po dodaniu pozycji w menu oraz przypisaniu im odpowiednich linków możemy je za darmo pobrać.

      9. Con PureCSSmenu es muy sencillo generar un menú para el blog; aún los más complejos con varios niveles de submenues y todo lo hacemos online.
        Con una ventana muy sencilla, podemos ir agregando item por item o bien utilizar algunos de los templates predefinidos y cambiar los parámetros gráficos, establecer los enlaces y definir si se van a abrir en una nueva ventana o no. Una vez que lo tenemos armado, lo descargamos a nuestra PC. Será un archivo ZIP que contendrá una página HTML de la cual podremos extraer las definiciones de estilo.

      10. Pure CSS Menu é uma excelente ferramenta que lhe permite menus CSS drop-down, sem a necessidade de quaisquer conhecimentos de design, em poucos cliques. Atualmente há 8 modelos, que podem ser personalizados a gosto.

        É possível adicionar ou excluir itens ou links, definir fontes e cores, o link destino, e assim por diante. Sempre observando uma previsualização das alterações, no lado direito da tela.

      11. ¿Qué ventajas me ofrece puro css menús desplegables? Bueno, son ligeros - a pocos kb de tamaño, el trabajo en casi todos conocido navegador (Internet Explorer, Firefox, Opera, Safari, Mozilla, Chrome, Netscape Navigator, etc) - incluso los que se han desactivado JavaScript y una de las cosas que más me gusta: CSS menús son motor de búsqueda de amistad!

      12. オンラインでドロップダウン型のナビゲーションを簡単に作成できるサービス「Pure CSS Menu : Free CSS Menu Generator」を紹介します。
        サイトのキャプチャ

        デザインは用意されたテンプレートから選択が可能で、背景とテキストの色変更や、ナビゲーションの構造を変更することもできます。 プレビューでは日本語の表示にも対応しています(書き出しもOK)。

        ナビゲーションの生成はプレビューが完成したら、下の「Download」をクリックするとファイル一式がダウンロードできます。

        対応ブラウザの明記はありませんが、生成したファイルを見る限りではIE6まで対応していました。

      13. Pure CSS Menu.com : Es un generador en línea de menús desplegables del tipo CSS, se ofrece en forma gratuita. Este software es capaz de crear un menú desplegable sin JavaScript, en un 100% en CSS, ofrece menús CSS horizontales y también menús del tipo vertical. El usuario simplemente necesitará realizar tres sencillos pasos para poder construir sus menús CSS.

      14. La herramienta se llama: “purecssmenu”, tiene varias opciones: le pueden cambiar el estilo de fuente, el fondo del menú, el color a la hora de activarlos, tiene diferentes estilos, etc. Yo encuentro esta herramienta muy útil porque aparte de ser (gratuita) no tienen que complicarse la vida diseñando estilos nuevos o en otro lenguaje como (JavaScript).

        Solo entran a la página y empiezan a modelar su (menú), despues hay un bótón del lado derecho para que bajen el archivo que crearon y lo integren a su diseño o editor de páginas preferidos. Espero les sea útil.

      15. CSS Hover Effect
        Multi-level drop-down menu that’s built entirely with CSS (without any JS).
        More:
        • Drop-Down Menus, CSS Horizontal Menu Style
        • CSS DropDown Menu, CSS Vertical Menu Style
        • Elegant Drop Menu with CSS only
        • Script-Free Pure Drop Down CSS Menu System
        • Tutorial: CSS Multilevel Dropdown Menu

      Awesome Web Menus! Superb Web Buttons! Try Now for Free!
      1. Cool maker!!! :)

        Rocket December 24, 2009

      2. The bug with missing images in zip file is fixed. Please try again.

        Admin December 28, 2009

      3. Thanks! I got it working, looks great. ---------------------------- Thanks for this site, I tried making a drop down menu but I'm running into a couple problems. 1) The images aren't included with the zip file for the "shiny black" template. 2) The URL within the CSS code doesn't link to the image either. I don't know if that's causing the code not to work properly because after I separated and linked the pages into an .htm and .css file, all I got was a navigation map without any of the styling or drop downs. Hope you can help me figure this out. Thanks!

        Anonymous December 29, 2009

      4. Great work. Can we use custom images instead of text for the items in menu?

        Anonymous December 29, 2009

      5. This is was a well thought out and wonderfully designed online application. I hope you will keep it free. You should offer a way for fellow designers to make PayPal donations to your project. Being a developer myself, I understand the costs invovled with "your time," and if people want to give to that, you should provide a way for them to do so. :o)

        David McGuffin | McGuffin Design Group December 30, 2009

      6. nice work. but what's change template with? example: my navigation 100& or 980px.

        Anonymous December 31, 2009

      7. Kudos for putting this tool online. It has been a great help to me on the site I am creating. It would be nice to add a save function. I changed to a different page on your site in the middle of creating a menu structure and when I came back it was back to the default settings.

        macxprt January 2, 2010

      8. i just wanted to say that this app is really handy, thanks. oh, and its practical. i like that. i agree with an above post to put a donate button, its worth a few bucks to save the time it takes to code a 3 tier menu. cheers

        White Owl Logistix January 2, 2010

      9. Once you make your dropdown menu, download it, extract the zip file, how do you add it to your website?

        Rider January 3, 2010

      10. Thanks for the great help, but there is a small bug in the code which is sent: even though you ask the target to be _self, the code is always returned with a _blank target. No big trouble if you know it, a find and replace does wonders, but still it might be the icing on the cake, you know.

        Anonymous January 3, 2010

      11. I was about to get it on my website, but how do you center the menu with the rest of your page? I've tinkered with it some, but still bares to the left. Thanks.

        Rider January 3, 2010

      12. This is awesome but I'm having a problem figuring out how to transfer my new menu to my website. Evidently I'm not that computer litterate Help please. Thank you

        Sarajuly7 January 7, 2010

      13. Very Impressive navigation generator. Thank you very much! Just wondering if anybody has had any issues with the Z-index of content below the navigation. I have a floated div on one page below the nav and the sub categories keep appearing below it even when I change the z-index. Only happens in IE... Typical. Thanks again!

        Anonymous January 7, 2010

      14. I cannot get your menu to work on my page while viewing from internet explorer 8. Please let me know what I can do to resolve this issue. Thank you for the great software!

        Michael Passarelli January 11, 2010

      15. Can someone please tell me how to use two css menus on one page. I added a horizontal css menu from this site beautifully, but when I added a vertical css menu from this site to the same page, both menus got all messed up. Any help would be greatly appreciated! Thanks! ~A newbie to CSS

        Anonymous January 11, 2010

      16. Sub menus are not working on IE but they work very well on Firefox.. can you pls help. Thanks!

        GalaKidz January 13, 2010

      17. Has anyone found out how to make it work in IE? Not sure why IE can't get it together like all the other browsers! :)

        Anonymous January 13, 2010

      18. To work submenu in IE, try to add DOCTYPE into the page.

        Developer January 14, 2010

      19. Tool is great. But I must be worse at CSS than I thought because I can't get the whole menu block to center. I use margin-left: auto; margin-right: auto; but it does nothing. How do you get this to center?

        Anonymous January 16, 2010

      20. wonderful solution to my IE 6 display problems and only 3 kilobytes!

        Anonymous January 16, 2010

      21. This looks like a great tool. I have created and saved a test menu but I cannot work out how to reload it for later editing. Please can you advise if this is possible and how to do it?

        Nick January 18, 2010

      22. This suffers from the same bug as all those fake menus. When you select a submenu you have to go exactly right and then down. Normal users go diagonally, but then the submenu is either gone, or the next submenu is showing. The solution is easy: basically you have to track the angle of the mouse movements and if they are diagonal to the right keep the submenu open for a second or so, before you give up and close it (and maybe open another submenu). That gives the user a much better UI experience. Here's a picture. The green line is how it should be, the red is how it is now. http://static.arstechnica.com/20100104/hierarchical.png

        Anonymous January 19, 2010

      23. the best menu generator i have yet found - easy - aesthetic - and no active scripting requirements like most D/HTML tutorials and generators - GREAT WORK

        Anonymous January 20, 2010

      24. Nick, wht you suggest would reqire javascript - which goes against what this generator is all about - pure css menu solutions

        Anonymous January 20, 2010

      25. Hi, Question from newbie, what code and where to alter the width and height of menu, Thanks in advance, Kevin

        Anonymous January 20, 2010

      26. how do you make the menu horizontal?

        Anonymous January 22, 2010

      27. sorry, i'm mean, how do you make the menu vertical?

        Anonymous January 22, 2010

      28. Hello, I love this menu script! thanks looks great. Now I just need to make it work in my site. The links don't link. I'm sure I'm doing something wrong. I copied the code from the download Zip to place into my website. Am I missing something? Thanks! Stella

        Anonymous January 22, 2010

      29. I lost a harddrive with most of my favorite scripts, so I found this site; absolutly great! How about making a paypall 'donate' page so we can show you a little appreciation! Thanks, Cfre4k

        Anonymous January 24, 2010

      30. Beginner here...how do I get the menu on my site after I download the zip?

        Anonymous January 25, 2010

      31. Thanks again for the nice script! Do you have any tips to get it right for html validation of w3schools?

        Anonymous January 26, 2010

      32. This is very best site for creating this types of submenus THANK YOU VERY MUCH

        Anonymous January 27, 2010

      33. This is a great tool, thanks for making it! I'm new to this also, how do I center it on my page? Thanks again

        Anonymous January 27, 2010

      34. Excelent page simple generator with lot of options, could be great a feature to save your menu

        Anonymous January 28, 2010

      35. Wow, exelent......but........ how do I put this in my Web Page? xD! take care Bye!

        Anonymous January 28, 2010

      36. Amazing Tool!

        Anonymous January 29, 2010

      37. Como se puede guardar el menu generado para poder modificarlo y agregarle más elementos posteriormente. Carlos Rugilo

        Anonymous January 30, 2010

      38. Dear, First of all thank you for providing such nice tech in free. thnx again my query come suggestion is that 1}is it possible to place this menu in "Google Site"? 2}Is there any gadget created for this nice menu creator for "Google Site"? 3}is there any way to place this menu bat on the side of the screen? 4} request you an option in addition to download, to provide a dedicated page for this menu bar so that one can save online, publish, and share as template. Thank You Hitesh

        BHANUSAMAJ January 31, 2010

      39. I wish we could save our menus to our account.

        Adam February 1, 2010

      40. THIS QUESTION HAS BEEN ASKED BY MANY HERE!!!! AFTER CREATING AND DOWNLOADING THIS, HOW CAN THIS BE INSTALLED OR MADE TO WORK IN JOOMLA SITE??????????????????????? if the admin cannot tell us this, we can read some comments above of some of you that has got this working. TELL US HOW!

        Anonymous February 1, 2010

      41. This site is absolutely amazing! I have been trying for weeks to get my CSS drop-down menu working and I finally found this site...and its customizable! When I get my site up and running, I plan to plug this site for my gratitude that you posted this for free!

        Anonymous February 1, 2010

      42. An excellent site, congratulations.

        Anonymous February 3, 2010

      43. This question has been asked but not answered (except to say add DOCTYPE - which doesn't work): how can I make this code work with all versions of IE? What good is a good snippet with a great generator if it doesn't work in all browsers? I'd be willing to donate to the author if s/he could PLEASE resolve the dang IE issue.

        Anonymous February 3, 2010

      44. what a great work ya.....really good style

        Anonymous February 4, 2010

      45. I have been trying, with my limited knowledge of CSS, to make a drop menu that would work with all browsers. I had success with everyone of them except Win IE. After days of beating my head against the wall, I found your site, and VOILA, problem solved. Thanks so much for this great aid for us newbies. I do have one problem with my Web page: http://susquehanna-wcha.sciencehill.org/ I have two levels under the Activities heading. When I hover over Activites->Restorations, the third level has a gap which will not permit access to it. How do I solve this? Thanks.

        Mike February 5, 2010

      46. I solved the above problem. I had changed an entry in the first block of style from "margin-left:0px;" to :margin-left:10%;". I found that this moved each level of the menu to the right, causing the gap. Continuing to look for a way to center the menu, I added " margin-left:10%;" to the style named "ul.pureCssMenu table" (the second block of code. This did center the menu, and had no effect on levels 2 or 3. Now, I am very happy.

        Mike February 5, 2010

      47. hey how do i add the menu to my website, i am using a webs website and i cant figure out how to do it. also is there any way to go in and make changes after you download it?? so that you can update it?? or do you have to restart entirely?

        Anonymous February 5, 2010

      48. To add the menu to your Web page, use a text editor to open: (1) Your Web page. (2) the Pure CSSMenu.html that you downloaded. Copy everything in the <head>, the complete <style> and the complete <PureCSSMenu.com MENU>. Paste these in your Web page as the first thing in the <body> of your Web page. To make changes, do not do anything to the style unless you are familiar with CSS. You can make changes in the <PureCSSMenu.com MENU> so long as you follow the syntax that is provided.

        Mike February 6, 2010

      49. The problem people are having with IE is that they are trying to put the menu in a table. If you remove it from the table, it will show horizontally.

        Anonymous February 13, 2010

      50. Thanks so much for this website, i was trying to learn how to do it myself and was struggling till i discovered this site, saved me so much time!! i will be implementing it soon to my site ill post a link when done to show you what i have done! once again THANKYOU!

        Robert Hiseman February 16, 2010

      51. And to stop all the people asking this question over and over please read this!! HOW TO PUT THIS ON A WEBSITE! :D make sure your css menu (unzipped) is placed in the same folder as the page to be displayed and then put this piece of code: <!--#include file="cssmenu.html" --> on your webpage wherever you want the menu to appear, cant get any simpler than that! :D

        Robert Hiseman February 16, 2010

      52. bug, Icon of file html nohting, can't display

        Anonymous February 20, 2010

      53. Thanks for your hard work on the css menu. I have found it very useful. I put the menu on a site I have to have make compliant html or valid with W3C (http://validator.w3.org/). My file runs perfect except for 16 errors related to the submenus (related to the IF and ENDIF). # Error Line 141, Column 183: "IF" is not a reserved name …Cheif Professional Officer</span><![if gt IE 6]></a><![endif]><!--[if lte IE # Error Line 141, Column 202: "ENDIF" is not a reserved name …Officer</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td>< How would approach needing to make my site compliant? My two inexperienced thoughts are: 1. Make W3C recognize the IE conditional HTML as a reserved word. Any thoughts on how to do this? 2. Take out the IE conditional tables on the submenus, then place the links (that would appear on the sub menus) in the body of the main menu item. This, I think, would make the sub menus available for non-IE browsers. Unfortunately, IE 6 and below browsers will have to use the links on the body of the page after following the main menu links. 3. My site is in ASP .NET. Write separate menus when using IE6 and below to have the submenus expanded. 4. Another option? I am not able to use javascript as the site has to be able to function the same with and without javascript. Thanks again for all your help.

        Anonymous February 21, 2010

      54. What are the licensing terms of the generated code and images? I could not find that anywhere. Can you make the generated code and images public domain or MIT license? - http://www.opensource.org/licenses/mit-license.php Thank you for this great menu system. It works awesome.

        Anonymous February 22, 2010

      55. My flyout menus are going UNDERNEATH/Behind the other content on the page. What to do??

        Anonymous February 22, 2010

      56. i downloaded the file.pls any1 explain me how to add this menu in blogspot..edit html etc i'm new here..its be helpfull to me..

        Anonymous February 23, 2010

      57. The code doesn't validate as strict XHTML 1.0. You also need to validate the CSS, because there are some typos in there.

        Anonymous February 23, 2010

      58. Very nice menus. smooth and classy ! One thing i would like to do is have the menu bar center in a DIV. I suppose i can do this trought a "float" but not sure wich one. Can someone help me with this issue ? thanks :)

        Paul February 24, 2010

      59. I didn't get an answer to the flyout menus going UNDERNEATH the other content on the page. Are you available for Freelance/paid work to fix this?? See: http://www.rclclients.com/pure/index.html

        Anonymous February 24, 2010

      60. menus going underneath ... did you try SSI ? <!--#include virtual="cssmenu.html" -->

        Paul February 24, 2010

      61. Really like the menus. I'm trying to use a vertical menu, like the green one in the wizard. After I download it, in Firefox it looks like I want, with borders around each item that stay lined up. In IE the borders around the items don't stay lined up on the right side. The right side of the "cells" shrink to the size of the text in the cell. Submenus look ok. Looks like it's just on the main menu. Downloading the standard one from the wizard does the same thing. Any ideas? Thanks.

        Anonymous February 25, 2010

      62. I have tried searching the code but I can not find how to edit the width of the whole menu. I need to stretch it out to make if it my menu area. Please help. I can only find where to Change the width of the drop down items. Thanks.

        Lupe February 25, 2010

      63. Menus going UNDERNEATH because other elements on the page have more priority. Try to define z-index and position:relative CSS property to the menu object and wmode=opaque for flash objects

        Developer March 2, 2010

      64. To centered the menu delete float CSS parameter and add display:inline-block to the main menu object.

        Developer March 2, 2010

      65. Really a nice service. I need to now learn all of its capabilities.

        Rocky March 4, 2010

      66. Nice idea to be able to save the menus on our accounts somewhere and be able to reload them. I'm working on an extended menu and there are modifications to be made. Links and hints to be added so that would be real benefit if we could do that :) Thanks again !

        Paul March 7, 2010

      67. issue: Center menus in a DIV: Thank you for the answer. Fact is i am not sure which float i am suppose to delete (ul.pureCssMenu table) ? AND where am i suppose to add the display:inline-block (in your purecssmenu file or my .shtml file ?) :/ Thanks again :)

        Paul March 7, 2010

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

        Anonymous March 7, 2010

      69. Thanks for the z-index help, however it didn't really work. I've placed z-index:1; everywhere in the css. Nothing is bringing it to the front. Any suggestions would be great. Thank you in advance.

        Anonymous March 7, 2010

      70. A tought about the Z-index issu: could it be that you have multiple CSS sheets, some with conflicting coding. Just a tought.

        Paul March 8, 2010

      71. It is very nice

        er March 9, 2010

      72. bvfgbd dfgd fdfgdfjkgh dfghdfjkgh dfkg

        er March 9, 2010

      73. Awesome tool. Congrats..

        Anonymous March 10, 2010

      74. i figured out how to center the menu in the DIV :) thanks :)

        Paul March 10, 2010

      75. it is very nice

        Anonymous March 11, 2010

      76. For guys having trouble with your drop down menu in IE; try this to resolve place z-index:1000001 in the <div> tag which holds your menu bar not in the code downloaded from pure css menu; you should add z-index in your style sheet where your placing the menu bar.

        Anonymous March 11, 2010

      Sitemap