<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>CSS MenuMaker</title>
    <meta name="description" content="HTML, CSS, and jQuery menus. Find the resources you need to build the perfect menu." />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="/blog/assets/images/favicon.png?v=e830222a20">

    <script src="/blog/assets/js/fontloader.js?v=e830222a20"></script>
    <script>
     WebFont.load({
        google: {
          families: [
            'Merriweather:300,700,700italic,300italic', 
            'Open+Sans:300italic,400italic,600italic,400,300,600,700',
            'Balthazar',
            'Bitter:400,700,400italic'
          ]
        }
      });
    </script>

    <link rel="stylesheet" type="text/css" href="/blog/assets/css/screen.css?v=e830222a20" />
    <link rel="stylesheet" type="text/css" href="/blog/assets/css/prism.css?v=e830222a20" />
    <link rel="stylesheet" type="text/css" href="/blog/assets/awesome/css/font-awesome.min.css?v=e830222a20" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

    <script type="text/javascript">
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
        analytics.load("oCfx7i0KhuPsJiuMLkgvLkTWay1Te5NP"); // Production
        //analytics.load("456v6NdcdHLaGXniToO8w5ZdjM52PBis"); // Dev
        analytics.page();
        }}();
    </script>

    <link rel="canonical" href="http://cssmenumaker.com/blog/" />
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <link rel="next" href="http://cssmenumaker.com/blog/page/2/" />
    
    <meta property="og:site_name" content="CSS MenuMaker" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="CSS MenuMaker" />
    <meta property="og:description" content="HTML, CSS, and jQuery menus. Find the resources you need to build the perfect menu." />
    <meta property="og:url" content="http://cssmenumaker.com/blog/" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="CSS MenuMaker" />
    <meta name="twitter:description" content="HTML, CSS, and jQuery menus. Find the resources you need to build the perfect menu." />
    <meta name="twitter:url" content="http://cssmenumaker.com/blog/" />
    
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Website",
    "publisher": {
        "@type": "Organization",
        "name": "CSS MenuMaker",
        "logo": "http://cssmenumaker.com/blog/ghost/img/ghosticon.jpg"
    },
    "url": "http://cssmenumaker.com/blog/",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "http://cssmenumaker.com/blog"
    },
    "description": "HTML, CSS, and jQuery menus. Find the resources you need to build the perfect menu."
}
    </script>

    <meta name="generator" content="Ghost 0.11" />
    <link rel="alternate" type="application/rss+xml" title="CSS MenuMaker" href="http://cssmenumaker.com/blog/rss/" />
</head>
<body class="home-template nav-closed">


    <div class="site-wrapper">
        <div class="menu-header">
            <div class="container">
                <a class="logo" href="/">CSS MenuMaker</a>

                <ul class="header-nav">
                    <li>
                        <a href="/" class="home">
                        <img src="http://cssmenumaker.com/sites/all/themes/cssmenu/images/header_menu_home_icon.png" />
                        </a>
                    </li>
                    <li><a href="/css-menus">Menus</a></li>
                    <li><a href="/wordpress-menu-plugin">Plugins</a></li>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/support">Support</a></li>
                </ul>
                <ul class="user-menu">
                    <li class="buy-now"><a href="/register">Buy Now</a></li>
                    <li class="login"><a href="https://app.cssmenumaker.com/login">Login</a></li>
                </ul>
            </div>            
        </div>

        
    <header class="main-header no-cover">
        <nav class="main-nav overlay clearfix">
            
        </nav>
        <div class="vertical">
            <div class="main-header-content inner">
                <h1 class="page-title">CSS MenuMaker</h1>
                <h2 class="page-description">HTML, CSS, and jQuery menus. Find the resources you need to build the perfect menu.</h2>
            </div>
        </div>
        <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>

    </header>


<main id="content" class="content" role="main">

    <div class="extra-pagination inner">
    <nav class="pagination" role="navigation">
    <span class="page-number">Page 1 of 9</span>
        <a class="older-posts" href="/blog/page/2/">Older Posts <span aria-hidden="true">&rarr;</span></a>
</nav>

</div>

<article class="post tag-tutorials tag-html tag-css tag-menus tag-breadcrumb">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/fancy-breadcrumb-navigation-tutorial-example/">Fancy Breadcrumb Navigation Tutorial &amp; Example</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Today I'm going to show you how to build a fancy breadcrumb navigation menu. Breadcrumb navs are a very import aspect of a well designed website. <a class="read-more" href="/blog/fancy-breadcrumb-navigation-tutorial-example/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/e832e7c26406f7212c825a5e7b5c17d4?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Luis Manuel" nopin="nopin" />
        <a href="/blog/author/luis/">Luis Manuel</a>
         on <a href="/blog/tag/tutorials/">Tutorials</a>, <a href="/blog/tag/html/">HTML</a>, <a href="/blog/tag/css/">CSS</a>, <a href="/blog/tag/menus/">Menus</a>, <a href="/blog/tag/breadcrumb/">Breadcrumb</a>
        <time class="post-date" datetime="2017-06-05">05 June 2017</time>
    </footer>
</article>
<article class="post tag-menus">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/10-free-html-horizontal-menus/">10 Free HTML Horizontal Menus</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Here at MenuMaker, we have put together a great collection of our best HTML horizontal menus for you. Some of these menus use pure CSS and <a class="read-more" href="/blog/10-free-html-horizontal-menus/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>
        <time class="post-date" datetime="2017-06-04">04 June 2017</time>
    </footer>
</article>
<article class="post tag-faq">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/how-to-make-your-items-a-submenu/">How to make your items a submenu</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Several users have asked us how to make their menus a submenu, so here we're going to explain the process behind it. Enjoy! Select the item <a class="read-more" href="/blog/how-to-make-your-items-a-submenu/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/faq/">FAQ</a>
        <time class="post-date" datetime="2017-06-01">01 June 2017</time>
    </footer>
</article>
<article class="post tag-menus tag-javascript tag-css">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/javascript-drop-down-menu-examples/">Javascript Drop Down Menu Examples</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Here at MenuMaker we have acquired a large collection of Javascript drop down menus that you can download for free and use in your next project. <a class="read-more" href="/blog/javascript-drop-down-menu-examples/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>, <a href="/blog/tag/javascript/">Javascript</a>, <a href="/blog/tag/css/">CSS</a>
        <time class="post-date" datetime="2017-06-01">01 June 2017</time>
    </footer>
</article>
<article class="post tag-resources">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/top-dreamweaver-extensions/">Top Dreamweaver Extensions</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Dreamweaver is already a great program to aid with web development, packed with features to save you a lot of time and effort when creating custom <a class="read-more" href="/blog/top-dreamweaver-extensions/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/resources/">Resources</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>
<article class="post tag-menus">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/top-8-clean-drop-down-menu-examples/">Top 8 Clean Drop Down Menu Examples</a></h2>
    </header>
    <section class="post-excerpt">
        <p>When you have a website with a decent amount of pages your drop down menu becomes a key factor in the user experience. A well laid <a class="read-more" href="/blog/top-8-clean-drop-down-menu-examples/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>
<article class="post tag-resources">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/great-resources-for-help-with-css/">Great Resources for Help With CSS</a></h2>
    </header>
    <section class="post-excerpt">
        <p>When you are just starting out, it can be hard to learn CSS, what everything does, what each piece of code means, and the different methods <a class="read-more" href="/blog/great-resources-for-help-with-css/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/resources/">Resources</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>
<article class="post tag-menus">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/new-menus-opera-flyout/">New Menus: Opera Flyout</a></h2>
    </header>
    <section class="post-excerpt">
        <p>You've been enjoying the Opera Dropdowns but maybe you've been wishing there was a vertical version you could use. Well, it's a Christmas miracle, because Opera <a class="read-more" href="/blog/new-menus-opera-flyout/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>
<article class="post tag-menus">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/new-jquery-menus-added/">New jQuery Menus Added</a></h2>
    </header>
    <section class="post-excerpt">
        <p>We are excited to announce that we have just added new jQuery menus to the site. We've been getting a request for accordion style menus for <a class="read-more" href="/blog/new-jquery-menus-added/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>
<article class="post tag-menus">
    <header class="post-header">
        <h2 class="post-title"><a href="/blog/new-css-tab-menus-added/">New CSS Tab Menus Added</a></h2>
    </header>
    <section class="post-excerpt">
        <p>Stuck with the same boring looking CSS menus? Try out the new CSS Tab Menus we just added. They are bright, bold, sexy and ready to <a class="read-more" href="/blog/new-css-tab-menus-added/">&raquo;</a></p>
    </section>
    <footer class="post-meta">
        <img class="author-thumb" src="//www.gravatar.com/avatar/a0ee4afaba25391d057058f9a59d66a0?s&#x3D;250&amp;d&#x3D;mm&amp;r&#x3D;x" alt="Russell Taylor" nopin="nopin" />
        <a href="/blog/author/russell/">Russell Taylor</a>
         on <a href="/blog/tag/menus/">Menus</a>
        <time class="post-date" datetime="2017-05-31">31 May 2017</time>
    </footer>
</article>

<nav class="pagination" role="navigation">
    <span class="page-number">Page 1 of 9</span>
        <a class="older-posts" href="/blog/page/2/">Older Posts <span aria-hidden="true">&rarr;</span></a>
</nav>


</main>


        <div id="footer">
          <div class="container clearfix">
            <div class="panel about">
                <h3>CSS Menu Maker</h3>                
                <ul class="menu">
                <li class=""><a href="/contact" title="">Contact</a></li>
                <li class=""><a href="/guest-post">Guest Post</a></li>
                <li class=""><a href="/terms-of-use-privacy">Terms of Use/Privacy Policy</a></li>
                <li class=""><a href="/site-map">Site Map</a></li>
                <li class=""><a href="/affiliate-program">Affiliate Program</a></li>
                <li class=""><a href="http://csstablemaker.com">CSS Tables</a></li>
                </ul>              
            </div>
            <div class="panel share">
              <h3>Connect & Share</h3>
              <ul>
                <li class="blog"><a href="/blog">Blog</a></li>
                <li class="facebook"><a href="https://www.facebook.com/pages/CSS-Menu-Maker/279061742195302">Facebook</a></li>
                <li class="twitter"><a href="https://twitter.com/CSSMenuMaker">Twitter</a></li>
              </ul>
            </div>
            <div class="panel newsletter">
              <h3>NewsLetter</h3>
              <p>Subscribe to our newsletter and get monthly updates, deals, and tutorials straight to your inbox</p>
              <form action="https://cssmenumaker.us2.list-manage2.com/subscribe/post?u=fa29a96f8de9c1032a4067563&amp;id=65c74fbce5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate clearfix" target="_blank">
              <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="orange-button">
              </form>
            </div>
          </div>  
        </div><!-- /footer -->

    </div>

    
    <script type="text/javascript" src="/blog/assets/js/jquery.fitvids.js?v=e830222a20"></script>
    <script type="text/javascript" src="/blog/assets/js/index.js?v=e830222a20"></script>
    <script type="text/javascript" src="/blog/assets/js/prism.js?v=e830222a20"></script>
    <script type="text/javascript" src="/blog/assets/js/tracking.js?v=e830222a20"></script>

</body>
</html>
