Create a Drop-Down Navigation Menu with HTML5 and CSS3

There are some great solutions to drop-down navigation menus, like the superfish jquery plugin for example. Many of them are using a lot of files and resources to generate the drop-downs but sometimes you don`t need all of them. I want to show you how to create your own simple, but stylish drop-down menu, using the new HTML5 tags and the awesome CSS3 styles.

Nav Menu (4840 downloads)

The drop-down we`re going to build is hided and revealed on hover using only CSS. Using the new CSS3 transitions features, we`ll animate the hover states and drop-downs. These effects act exactly like the javascript effects you`re used to use. The structure of the files is simple. You need an index.html and a style.css file in which to store the css styles.

Here`s a preview of what we`ll build today:

Let`s begin with the HTML structure. That`s the head part:

<!doctype html>
<html lang="en>
<head>
	<meta charset="UTF-8">
	<title>HTML5 / CSS3 Drop-Down Navigation Menu</title>
	<meta name="description" content="">

	<link rel="stylesheet" href="style.css">

	<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>

In the body part, we`ll add the html code for the nav menu. Each ul list inside a li is a drop-down menu. I added “»” to each parent li to show the hierarchy. The code creates right double angle quotes to element.


<body>
<nav id="nav">
	<ul id="navigation">
		<li><a href="#" class="first">Home</a></li>
		<li><a href="#">Services &raquo;</a>
			<ul>
				<li><a href="#">Web Development</a></li>
				<li><a href="#">Logo Design</a></li>
				<li><a href="#">Identity & Branding &raquo;</a>
					<ul>
						<li><a href="#">Business Cards</a></li>
						<li><a href="#">Brochures</a></li>
						<li><a href="#">Envelopes</a></li>
						<li><a href="#">Flyers</a></li>
					</ul>
				</li>
				<li><a href="#">Wordpress</a></li>
			</ul>
		</li>
		<li><a href="#">Portfolio &raquo;</a>
			<ul>
				<li><a href="#">Graphic Design</a></li>
				<li><a href="#">Photography</a></li>
				<li><a href="#">Architecture</a></li>
				<li><a href="#">Calligraphy</a></li>
				<li><a href="#">Film &raquo;</a>
					<ul>
						<li><a href="#">John Carter</a></li>
						<li><a href="#">The Avengers</a></li>
						<li><a href="#">The Amazing SpiderMan</a></li>
						<li><a href="#">Madagascar 3</a></li>
					</ul>
				</li>
				<li><a href="#">Graffity </a></li>
			</ul>
		</li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#" class="last">Contact</a></li>
	</ul>
</nav>

</body>
</html>

Now let`s stylize the navigation. We`ll start with the styles for the main nav. The styles for #nav id can be removed if you want. They are just to center the menu. You can alter them to fit your design.


/* Main Navigation */
#nav {
	position:relative;
	width:620px;
	margin:0 auto;
	margin-top:50px;
	padding:10px;
}

ul#navigation {
	margin:0px auto;
	position:relative;
	float:left;
	border-left:1px solid #c4dbe7;
	border-right:1px solid #c4dbe7;
}

ul#navigation li {
	display:inline;
	font-size:12px;
	font-weight:bold;
	margin:0;
	padding:0;
	float:left;
	position:relative;
	border-top:1px solid #c4dbe7;
	border-bottom:2px solid #c4dbe7;
}

ul#navigation li a {
	padding:10px 25px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border-right:1px solid #fff;
	border-left:1px solid #C2C2C2;
	border-top:1px solid #fff;
	background: #f5f5f5;

	-webkit-transition:color 0.2s linear, background 0.2s linear;
	-moz-transition:color 0.2s linear, background 0.2s linear;
	-o-transition:color 0.2s linear, background 0.2s linear;
	transition:color 0.2s linear, background 0.2s linear;
}

ul#navigation li a:hover {
	background:#f8f8f8;
	color:#282828;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}

ul#navigation li:hover > a {
	background:#fff;
}

Notice that ul#navigation li a has some transition styles. They`re used to create a nice fading effect on hover.

Now let`s stylize the drop-down menus:


/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
	visibility:visible;
	opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
	width:180px;
	background:#f8f8f8;
	box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
	-o-transition:opacity 0.2s linear, visibility 0.2s linear;
	transition:opacity 0.2s linear, visibility 0.2s linear;
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px; /* strong related to width:180px; from above */
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:150px;
}

Now the menu is stylized and the developing process if finished. The menu is ready to be used in your own projects. Making use of CSS3, there are, of course, IE compatibility issues with the menu. The smooth effects implemented with CSS3 transitions doesn`t work in IE, but the menu is still functional and can be a reliable alternative to javascript menus.

I thank you for your time and for any feedback/questions, don`t hesitate to leave a comment below!

[Total: 18    Average: 4.6/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. kishan on May 7, 2012 at 1:17 am Reply

    thankyou, this one of the best that i have tutorial or instruction that i have seen. Hope to see more and more from you.

    1. Madalin Tudose on May 9, 2012 at 4:46 am Reply

      Thanks for your feedback! Stay close for more in the future!

      1. Oudom duch on May 10, 2012 at 9:21 am Reply

        i want learn adobe photoshop design

  2. Raje on May 17, 2012 at 10:55 pm Reply

    Nice Reference

  3. Jamie G on May 23, 2012 at 1:17 am Reply

    Can I chang the colour of the menu?

    1. Madalin Tudose on May 23, 2012 at 1:39 am Reply

      Yes, you can do whatever you want with it!

  4. Morgan on May 23, 2012 at 5:02 am Reply

    Hello,

    Thanks for the tutorial. I seem to have it working bar one problem. Can you help me?

    The drop-down appears but it appears behind the article section below it and I cannot seem to get it to sit on top. Any tips?

    This is the link to what I am working on.
    http://portalpie.com/rugbyfarm/

    Thanks

    1. Madalin Tudose on May 23, 2012 at 9:25 am Reply

      Hi,

      Thanks for sending me the link. I could see what the problem is. It seems like the problem is a CSS problem at:

      nav ul ul.children {
      top: 20px;
      left: 1px;
      }

      Change them with:

      nav ul ul.children {
      top: 32px;
      left: 0;
      }

      Thanks,
      Madalin

  5. Alex on May 24, 2012 at 9:17 am Reply

    Hi, great work by the way!

    Do you know how to get it to work on mobile devices? Would love to use this!

    1. Madalin Tudose on May 24, 2012 at 2:01 pm Reply

      Hi Alex…navigation on mobile devices is using other principles than on web…the main reason is because you can`t hover something on a mobile phone, but you can tap. For this reason, nav menus are transformed into select lists…Here`s a good tutorial which can help you: http://bit.ly/Jv8t4C

      1. Alex on May 25, 2012 at 1:35 am Reply

        Thank you!

        How would I integrate it with this menu though?

        1. Madalin Tudose on May 25, 2012 at 2:11 am Reply

          Well, you`ll have to use media queries. It`s not an easy task to explain but there are a lot of resources which can help you. For example this article is the most known article related to responsive web design: http://bit.ly/JIugnJ

          Try to combine these 2 resources and you should be able to make it work!

  6. Maia on May 30, 2012 at 10:18 am Reply

    Hello!! Thank you for the post, it is very nice!!

    I have a problem on firefox browser. Instead of having a horizontal menu, i have vertical one. Do you know where can be the problem?

    Thank you!!!

    1. Madalin Tudose on May 30, 2012 at 3:53 pm Reply

      Hi…can you give me a link to the menu you`re working on? I can`t tell you what the problem is until I see it!
      Thank you!

  7. Arbuz on June 2, 2012 at 6:41 pm Reply

    Thanks for tutorial.Useful info.

  8. senthilkumar on June 3, 2012 at 4:14 am Reply

    Can i use this for my wordpress blog.

    1. Madalin Tudose on June 5, 2012 at 5:48 am Reply

      Sure, you can use it for whatever you want.

  9. Paulof on June 6, 2012 at 6:42 am Reply

    Hi. Great stuff. Thanks a mil. I need to have this at the bottom of my page, with the sub menus popping UP rather than dropping down….What do I need to change in the code?

  10. Cathy on June 7, 2012 at 8:39 pm Reply

    Hello,

    Thanks for your nice script and for sharing it.
    Still I have a small problem:
    The drop down menu is only showing in the right place for 1 item. Do you have an idea what’s wrong?
    Here is the link: http://www.blancoenelblanco.com/site_prevalence

    Thanks a lot,

    1. Madalin Tudose on June 8, 2012 at 12:48 am Reply

      Hi,

      You have a small wrapping error. You have to add the unordered list inside the parent list item.
      Instead of:
      <li><a href="#" rel="nofollow">VOS OBJECTIFS»</a></li>
        <ul>
         <li><a href="#" rel="nofollow">PARTICULIERS</a></li>
         <li><a href="#" rel="nofollow">ENTREPRISES</a></li>
        </ul>

      Try:
      <li><a href="#" rel="nofollow">VOS OBJECTIFS»</a>
        <ul>
         <li><a href="#" rel="nofollow">PARTICULIERS</a></li>
         <li><a href="#" rel="nofollow">ENTREPRISES</a></li>
        </ul>
      </li>

      1. Cathy on June 8, 2012 at 8:04 am Reply

        Thanks you SO much Madalin.
        Thanks for replying and taking the time. You made my day! 😉

      2. Haddouche on July 23, 2012 at 7:51 pm Reply

        plz drop down menu wont work this time !! help ?

  11. Ricko on June 10, 2012 at 6:17 pm Reply

    Thank you very much, really useful!

  12. Ricko on June 11, 2012 at 5:31 am Reply

    One lilltle problem. When i zoom in, the last box from the menu goes below the 1st box. Is there a way to prevent that?

  13. Carlos on June 22, 2012 at 11:20 am Reply

    Thank you very much!

  14. xing on June 24, 2012 at 1:26 pm Reply

    Thanks for the demo! Can I images as the buttons?

  15. uck on June 30, 2012 at 5:24 am Reply

    Great, clean and simple but useful tutorial.

  16. Prashant on July 10, 2012 at 3:29 am Reply

    You sir have been of great help. One of the best tutorials a newbie web designer can come across. Thanks.

  17. Terence on July 24, 2012 at 12:09 pm Reply

    Hi Madalin Tudose! I love this HTML5 Drop Down Menu! Its so easy to implement it in. I’m in high school and was ask to redesign the school’s website. I have the basic “link names” into my test page. It looks nice, but its aligned to the left. Can you help center the nav for me or give me suggestions of what I should do to fit the page? I set my header to be 960×100.

    My test site is http://kmctest.comyr.com/Kapaun%20New/default.html

    Thanks,
    Terence

    1. Madalin Tudose on July 26, 2012 at 2:19 pm Reply

      Hey,

      Thank you for using my menu. The things you can do is to set a width to ul#navigation of 958px. Also, try to increase the ul#navigation li a to “padding: 5px 14px 5px 15px;”. You have to tweak it a bit to fit the entire width.

  18. John Moore on July 26, 2012 at 10:51 am Reply

    I love this menu and have already have integrated this into a few projects! What a great starting point without a lot of clutter and scripting.

    As alex mentioned, the dropdowns do not work on mobile devices. Specifically iPad, iPod, and iPhone. With a little research and a couple tweaks, I was able to make the dropdowns appear when a parent item is tapped.

    Minimum changes needed for ipad functionality.

    In index.html:

    1. Add jQuery.
    2. Add this to your document.ready section:

    //ipad and iphone fix
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||(navigator.userAgent.match(/iPad/i))) {
    $(“#nav ul li a”).click(function(){
    /// Creating listener turns first item tap into an iOs hover event
    });
    }

    3. Change the way the dropdowns are shown / hidden with display instead of visibility.

    ul#navigation li:hover > ul
    Change: visibility:visible; to display: block;

    ul#navigation ul, ul#navigation ul li ul
    Change: visibility:hidden; to display: none;

    One thing to consider is that this method will break the link to the parent page on first tap. The way is works when I test it, is that the first tap will bring up the dropdown and the second tap will take you to the page. Here are a few solutions to take this further:

    1. Attach another hover style like text-decoration: underline to ul#navigation li:hover > a . This may cue the user to tap again if they want to go to the parent page.

    2. Instead of making the dropdowns under the links, put a caret to to the side of the links and have that initiate the dropdown. Just make the caret big enough for someone to tap on an ipad or iphone.

    1. Madalin Tudose on July 26, 2012 at 2:24 pm Reply

      Hey,

      Thank you for your time to put these things all together. There`s also a jQuery solution which transforms normal menus intro dropdowns: https://github.com/mambows/mobilemenu

      Anyway, I appreciate your time of making the menu working for mobile devices!

  19. @shoaibz on July 30, 2012 at 9:42 am Reply

    This waz really helpfull all thanks to the author for his support

  20. Rick on August 1, 2012 at 2:03 pm Reply

    Many thanks for this, such a simple yet extremely effective solution for what I required.

  21. Jerry Milward on August 8, 2012 at 2:22 pm Reply

    Awesome very clearly explained and great example thank you very much for doing it.

    1. fucking awesome on August 29, 2012 at 6:15 pm Reply

      fucking awesome HEEHHEHEHHE!!

  22. porlavar on August 19, 2012 at 2:24 am Reply

    thank you so much your example helps me a lot 🙂

  23. shain on August 20, 2012 at 12:13 pm Reply

    Can I use this dropdown menü in my personal site?

    1. Madalin Tudose on August 24, 2012 at 1:06 am Reply

      Yes, you can! Even commercial projects, not only personal ones!

  24. Maxine on September 16, 2012 at 7:24 am Reply

    Great, i actually get it, brilliant demo, very clear.
    thanks

  25. Cherie Tieppo on October 5, 2012 at 4:13 pm Reply

    Hello, thanks for these directions they were pretty clear. I’m having trouble with the drop down menus in IE9, can you please help me? When a user mouses onto the main menu button, the drop down appears fine, but when they try to mouse over one of the submenu options, the drop down menu disappears. What setting is causing this and how do I correct it? It seems to work fine in both Firefox and Google Chrome.

    1. Cherie Tieppo on October 5, 2012 at 4:17 pm Reply

      By the way, the site has a test page that is using this, if you’d like to see the code go to http://scielpaso.org/index_new.html . thanks!

      1. Madalin Tudose on October 5, 2012 at 5:11 pm Reply

        Hi. The problem is that you set the submenu too far from the main button. There`s a space between the button hovered and the submenu, but because Chrome and Firefox understands CSS3 transition properties, the submenu remains visible. IE doesn`t recognize CSS3 features, that`s why the submenu disappears.

        Here`s a fix. Open menustyle_new.css go to line 108 and replace the current code with this new one:

        ul#navigation ul {
        top: 37px;
        left: 0px;
        }

        Thank you!

        1. Cherie Tieppo on October 5, 2012 at 8:18 pm Reply

          That is exactly what I needed, thank you so much. One other question – why does the text on the main menu button disappear when I mouse over one of the submenu items? For example, if I put my mouse on membership, then move down onto application, the word membership disappears. I think this may be confusing for some of my users, since a lot of them are not very web savvy. I’ve tried to find the setting for this too but I’m not having any luck. Any suggestions? Again, thanks a lot, this is a huge help.

          1. Madalin Tudose on October 8, 2012 at 8:48 am

            That`s because you set the same color to submenu background parent list item color. Change the color of the next item

            ul#navigation li a {
            color: #323232;
            }

          2. Cherie Tieppo on October 10, 2012 at 9:58 am

            Great, that was what I couldn’t find. Thanks very much!!

            I’m getting another site set up to use this and I have one odd thing happening. The drop downs don’t appear in IE9. They work fine in both Chrome and Firefox. I started from the same code as the scielpaso.org site, so I’m stumped. The site test page is at: http://scinovi.com/index_new.html

          3. Madalin Tudose on October 10, 2012 at 10:49 pm

            I don`t know why isn`t working. It might be related to HTML5 tags support for IE. Try to follow the tutorial. Thanks!

  26. toni on October 20, 2012 at 7:39 pm Reply

    Thank you so much. This is what I spent two days looking for!

    Appreciate your help.

  27. Kaso on October 22, 2012 at 5:14 pm Reply

    Hey,
    Has anyone experienced the menus going behind divs, making the menus virtually unusable?
    This ONLY happens in IE (I’m using 9, specifically). I’m not using any z-indexes either.
    The site I’m working on is:
    http://www.psemi.com/test/test.php

    Let me know if anyone has any ideas….
    Thanks!

    1. Kaso on October 22, 2012 at 5:19 pm Reply

      Lol ok nevermind, I answered my own question! The div that the menu was going behind was set to “position:relative”. Taking that out solved the problem!

  28. paul on October 28, 2012 at 11:18 pm Reply

    is there any problem of using it with @font-face (non web safe fonts)?
    Nice work, thanks a lot for sharing!

    1. Madalin Tudose on October 29, 2012 at 12:40 am Reply

      No problem. You can use it with @font-face kits.

    2. Paul on October 30, 2012 at 8:40 pm Reply

      Thanks a lot, Madalin!

  29. Linen on November 6, 2012 at 11:44 pm Reply

    Thank you for a great menu. It seems quite stable. I’d like to change the colors. I just hate Internet Explorer. It really sucks!

    Thanks again,
    Mark
    Linen Logon

  30. Marcus on November 14, 2012 at 10:39 am Reply

    Thank you for an excellent tutorial. Drop down menus are not my speciallity but yours was realy easy to use.

    1. Madalin Tudose on November 15, 2012 at 4:01 pm Reply

      I`m glad you enjoyed implementing it! Best regards!

  31. Salman on November 21, 2012 at 3:08 pm Reply

    Hey Madalin, thanks so much for this amazing guide!
    I just had a question about the two sets of code that you give that are related to the styling. Does this code go in a separate file? If so, does it just go in my style.css file exactly as you typed it out? Because I tried doing that, but nothing changed on my site.

    Thanks in advance!

    1. Madalin Tudose on November 22, 2012 at 8:23 am Reply

      Hi. If you add the code in style.css, make sure to link style.css to your page with "<link rel="stylesheet" href="style.css">"

      Thank you!

  32. Chris on November 23, 2012 at 10:09 am Reply

    Thanks for the great code and for the great explanation(especially thanks for actually explaining it). If this was google i would +1.

  33. Frank Rizzo on November 24, 2012 at 2:18 pm Reply

    I like this menu. It’s so easy to configure and the styling is great. But I had to spend a few days trying to get it to work with iPad / iPhone.

    The lack of hover action on those devices means the drop down menu does not appear. Many fixes were tried including jQuery solutions but none worked. In the end I found a solution from here:

    http://www.elfboy.com/blog/making_css_drop_down_menus_work_on_the_iphone

    It is a simple fix that is purely CSS

    Add this:

    #navigation ul { display: none; }
    #navigation li:hover ul { display: block; }

    Works great.

  34. JAABI on December 7, 2012 at 11:36 am Reply

    Hi Madalin,

    I have only one html window on my builder to set code.
    how to deal with Head & body and navigation & drop down code?

    thx 4 answering
    Jaabi

    1. Madalin Tudose on December 8, 2012 at 3:55 pm Reply

      Hi. The thing you need to do is to add the entire CSS code into <head> ... </head> of your page.
      Make sure to wrap it into <style> css code </style> so it can be validated. Thank you!

  35. Ville on December 10, 2012 at 4:26 am Reply

    You could use :first and :last selectors to remove unwanted margins instead of making a new class definiton. 🙂

    1. Ville on December 10, 2012 at 4:27 am Reply

      I mean :first-child and :last-child.

  36. reinhard on December 14, 2012 at 7:21 am Reply

    thanks for the menu, great one. very structured and easy to use.
    bummer being i have, as always, IE issues. the menu (i am doing a page for a friend, and it’s still ways to go, so nevermind the sloppy code…) won’t call up the links when you go to “portfolio” and “video”. the other menu items work. only after reloading the page in IE the links work.
    the page performs nicely in both safari and firefox.
    any ideas would be appreciated …

    reinhard

    1. Madalin Tudose on December 17, 2012 at 2:01 am Reply

      The tutorial wasn`t built to run on all IE browsers. It was built to demonstrate what HTML5 combined with CSS3 can achieve. Unfortunately, some browsers are too outdated to support them and when I say some browsers I mean IE6-8. Microsoft doesn`t have a clear vision about their browser like Google has. Why couldn`t they stick to a single IE version and when a new version appeared, it could overwrite the old one by updating it with the new files? These are questions which doesn`t have answers for me at least!

      1. Alex Marsz on January 1, 2013 at 9:29 am Reply

        Doesn’t appear to work for iOS Safari, either. Obviously anything touchscreen needs to treat clicks as hovers, and Apple doesn’t seem to have have made that innate just yet.

  37. SCX on December 23, 2012 at 11:58 pm Reply

    I like this one, but how to add this to wordpress??

    1. Madalin Tudose on December 27, 2012 at 10:58 am Reply

      I`m glad that you like the tutorial. It`s a bit harder to implement it into WordPress. You have to know how to create WordPress menus and to integrate jQuery into it.

      1. SCX on December 27, 2012 at 11:14 am Reply

        I have tried yesterday but failed, need to learn harder, Thanks Madalin, love ur site
        (y)

        1. Madalin Tudose on December 27, 2012 at 1:40 pm Reply

          Well, I might create a tutorial about how to integrate this menu into WordPress, so stay close 🙂

          1. SCX on December 27, 2012 at 2:11 pm

            well that is good news, will wait for it, great for 2013 😀 thx

  38. Papetarie on December 26, 2012 at 3:07 pm Reply

    Best scripts thank you

  39. kimo on January 11, 2013 at 4:29 pm Reply

    great job thanks brother

  40. Cristiano on February 9, 2013 at 1:23 pm Reply

    Thanks for the amazing tutorial!

    How could I hide the drop-down menu when it’s clicked?

  41. Thomas on March 14, 2013 at 7:51 am Reply

    Hey, very nice tutorial and good looking dropdown menu, but one question:
    How would I change the width of the dropdown menus themselves.
    I tried giving a class to the appropriate and then styling it in the css. I can change stuff like background color, but I cannot change width, I’ve also tried adding width to several other id’s and classes in the stylesheet but nothing seems to change. Any help?

  42. deepsky on March 26, 2013 at 11:59 pm Reply

    very good!thank you

  43. Arti Badve on May 3, 2013 at 1:54 am Reply

    Superb!!!

  44. thanks on August 2, 2013 at 12:29 pm Reply

    One of the best tutorials available…thanks for being so generous with your knowledge.

  45. Konrad on October 17, 2013 at 7:52 am Reply

    Very good work. However I have one problem. I know that almost no one uses Opera but still it would be great if it would work for that browser. The menu doesn’t drops down and it behaves strangely. I would be gratefull for any solutions.

  46. বিহঙ্গ on October 22, 2013 at 12:45 pm Reply

    Really its great………………..Thank you
    Madalin Tudose

  47. ber on November 14, 2013 at 2:11 am Reply

    i am free tank u

  48. Dutch on November 14, 2013 at 4:43 am Reply

    Great article…..During my testing phase of your drop menu i found it didn’t work on safari and also on andriod devices.

  49. alex1984 on January 13, 2014 at 4:53 am Reply

    This is a very decent way to create a dropdown menu, thanks for that! I tried out and it looks really nice, but when I move the cursor from (in your example) “services” downwards, the dropdown-links disappear immediatelly and I have no chance to klick on them… Do you have an idea what could have went wrong?

  50. Nick on March 29, 2014 at 1:34 am Reply

    Congratulations…..

    I think this one is one of the best tutorial that i have seen.

    Thanks a lot. Hope to see more from you.

  51. pankaj yadav on June 3, 2014 at 10:19 pm Reply

    Best tutorial

  52. V Jenkins on September 14, 2014 at 9:34 pm Reply

    I have just begun my journey into web design and development, and your page was a tremendous help. I’m not looking to be a ‘copy and paste’ designer/developer, so I really inspected your CSS. This is excellent code. Thank you!

  53. Luke on December 9, 2014 at 11:12 pm Reply

    Wow. I’ve always had such a hard time with misbehaving drop down menus, but this is so straightforward and simple. Thanks so much!

  54. Peter on July 6, 2015 at 6:08 am Reply

    Hi nice tutorial, but i have a problem, the menu is by me vertical and no styling

  55. Jitesh on August 24, 2015 at 11:10 am Reply

    I Like this Menu, But I just want to put image instead of the name Home ,Services,Portfolio etc. Can you please help me out here?

  56. leon_frischauf on January 29, 2016 at 10:13 am Reply

    Under what license is this menu released?

  57. Madalin Tudose on June 17, 2016 at 12:45 pm Reply

    Will do, buddy! Thanks for the comment!

  58. 孙大王 on October 28, 2016 at 12:38 pm Reply

    Thanks a lot.Can i reprint your blog?

    1. Zameer Shar on September 13, 2018 at 8:04 am Reply

      How are you dear
      iam from pakistan
      and where from u

  59. Chandan on March 19, 2018 at 2:04 pm Reply

    Thanks a lot.
    Simple but attractive design.

Leave a Comment

Your email address will not be published. Marked fields are required.