Online CSS Menu Generator

Online CSS Menu code generator

FREE to use

Browser Compatibility

Supported by all other major browsers (including IE8+).


Rich HTML mega menu, or unlimited multi-level dropdowns.


Templates: 1 2 3 4 5
Decrease the screen size to see menu in mobile mode


  • Step 1

    Has Sub Menus


    • The CSS Menu will support the breakpoint (responsive feature) only when it has no sub-menus.
      Please use McMenu: Responsive Menu when your menu has sub-menus.
    • If checked, the menu HTML will contain sub-menus.
    • If unchecked, the menu HTML will contain only single-level menu items (no sub-menus), and if breakpoint is set, the menu will become the hamburger icon when the window width is less than the breakpoint, and clicking on the icon will toggle the menu display.


    You can uncheck the Has Sub Menus option, or use McMenu instead.

    For details please see the note below.

    It is the responsiveness setting: the menu will become a hamburger icon when the window width is less than the setting, and clicking on the icon will toggle the menu display.

  • Step 2: Choose style template



    Select the style template that best fits your needs.

    Your style customization in next step will be based on the chosen template.

  • Step 3: Styles

    • Display


      Background Color

      Border Color

      Arrow Thickness


      Arrow Size

      • Inline-block: The menu allows other adjacent inline elements stay in the same line.
      • Block: The menu takes up the full block. Other adjacent elements will NOT stay in the same line.

      The menu will slide in from this position when menu icon is clicked.

      Some style codes, such as menu icon position, menu animations in mobile mode, are generated based on this option and the above Position option. Those codes are between the /*--begin mark1--*/ and /*--end mark1--*/ in cssmenu.css.

      If you dislike the default generated styles, you can directly eidt those codes.

      Following is an example of the updated code:

      /*--begin mark1--*/ #cssmenu { position:fixed;top:0;bottom:0;left:0;right:0; height:100%!important; transition:all 411ms ease; opacity:0; } { opacity:1; } #cssmenu {z-index:1000000004;} .mobile-fixed-bg {display:none;} { position:fixed;top:12px;left:12px;z-index:1000000006; } /*--end mark1--*/
    • Padding X

      Padding Y

      This Padding Y and Font Size determine the height of the menu bar.

      The font in the list is Google Fonts except the Default.

      If a Google Font has been chosen, there will be a Google Font link in the head section in your download HTML demo page.

      Text Color

      Hover Text Color

      Font Size

      Hover Background

      Font Weight


      Letter Spacing


    • Min-Width

      It specifies either the min-width of sub-menu UL, or if any, the min-width of each column (DIV.clm) under the full-width dropdown DIV.

      Set it to 0 or initial if no specific min width is required.

      We are using CSS box-shadow property to specify the border shadow effect.

      If you dislike the shadow border, you can remove the box-shadow specification from the generated cssmenu.css file, and if you prefer solid border, add border specification there.

      Padding X

      Padding Y

      Text Color

      Hover Text Color

      Background Color

      Hover Background

      Shadow Color

      Font Size

      Font Weight


    • Position

      • Relative: The menu will appear at its default position in the HTML document
      • Absolute: Similar to above Relative except it is removed from the normal document flow. When the menu is open it will stay on top of its following contents instead of pushing them down.
      • Fixed: When the menu is open it will occupy the whole screen.

      Slide-in From

      Max Width

      Menu Item Text Align

      Font Size (Top-level)

      Menu Border Color

    • Switch the Demo preview window to mobile mode, you will see that by default, the menu on mobile device will become a hamburger icon:

      • If the menu icon is not at your preferred location, you can later manually modify the generated cssmenu.css by the .menu-icon and selectors.
      • If you want to add text "MENU" after the menu icon, just add it to the HTML code. Example
        <div class="menu-icon"> <div class="three-line"> <span></span> <span></span> <span></span> </div> <span style="font:bold 24px Arial;padding-left:10px;letter-spacing:-2px;">MENU</span> </div>

        You can see the live example in the One menu HTML code file for all pages viewing with mobile device or small browser window.


      Hamburger Icon


      Its position might also be specified based on the Position and Slide-in From options under the "Menu in Mobile Mode" tab.

      For details please click the question mark beside the Slide-in From option mentioned above.

      Icon Width


      Line Spacing


      Line Thickness


      Line Color

      Icon padding


      Icon Margin


      Icon Background

      Border Color

  • Step 4

    Top Item Animation in Mobile mode

    Top Item Animation CSS Code

    More Styles that You Want to Add

    This specification and the next Top Item Animation CSS Code will specify the animation effect for the menu item links in mobile mode.

    Leave this box blank if you don't need animations for the menu links.

    Its value format: Animation order, duration, timing-function

    • Animation order
      • 1: The animation will start from the first link to the last
      • -1: The animation will start from the last link to the first
    • Duration: number in seconds
    • Timing-function: possible values such as linear, ease, cubic-bezier(n,n,n,n). For details please refer to animation-timing-function.

    The animation code that applies to the menu links.

    Here you can add any additional CSS code to customize your menu styles.

  • Complete

    Congratulations! You have completed the menu customization.

    You can now click the "Download Source Code" button in this page to download the source code.

    If you need more customization that is not provided by this CSS Menu Builder, you can directly modifying the generated mcmenu.css in the download package.




  • Single-level Responsive Menu:

    If you have not chosen Has Sub Menus in Step 1, the menu is single-level menu that supports the responsive feature.

    The menu HTML code contains a hamburger icon, the menu markup, and a piece of JavaScript code to support the opening/closing of the menu when the menu icon is clicked.

    View the HTML code

  • Multi-level Menu:

    If you have chosen Has Sub Menus in Step 1, the menu is multi-level menu that can have unlimited level of sub-menus.

    The Multi-level Css Menu does not support the responsive feature. Please use McMenu: Responsive Menu when your menu has sub-menus and needs to be responsive.

    View the Demo HTML code:

    • To get Mega menu dropdown (as the one under the demo's Press item), just: <li class="full-width">...<div class="dropdown">...</div></li>
    • To get single-column dropdown (as the one under the demo's Creative or Contact item), you can: <li>...<ul class="dropdown">...</ul></li> Note:
      1. You can have nested ULs to aquire multiple-level sub-menus.
      2. If the sub-menus are under the last top-level item, you can add class="dropdown right0" so that the drowdown will be right-aligned and fly-out to the left.


Select the style template that best fits your needs in the customization Step 2, and then continue to next step for further customization.

Need to right align last submenu?

There is a pre-defined class right0. Just add class="right0" to the last top-level LI element.


Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.