How to Create a CSS3 Dropdown Menu


Preview
Topic: CSS3
Difficulty: Beginner
Estimated Completion Time: 20 mins

In this tutorial we will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI.

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.


<ul class="menu">

	<li><a href="#">My dashboard</a></li>
	<li><a href="#">Likes</a></li>
	<li><a href="#">Views</a>

		<ul>
			<li><a href="#" class="documents">Documents</a></li>
			<li><a href="#" class="messages">Messages</a></li>
			<li><a href="#" class="signout">Sign Out</a></li>
		</ul>

	</li>
	<li><a href="#">Uploads</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">Documents</a></li>

</ul>
Step 1

Step 2 – Menu Layout

We will start to remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus.


.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.menu {
	height: 40px;
	width: 505px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

We will hide the sub menu temporarily to be easier to style the first level.


.menu ul { display: none; }
Step 2

Step 3 – Menu Links

To style the menu links we will add some basic CSS properties like font, color, padding, etc. Then we will add a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color.


.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;

	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }
Step 3

Step 4 – Sub Menu

First let’s remove this line of code that we have added on the second step.


.menu ul { display: none; }

Now we will style the sub menu. We will start to position the sub menu 40px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state.

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

We will set the width of the sub menu links to 100px. Instead of left and right borders we will add a bottom one and remove it from the last link.



.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

To finish it we only need to add an icon to each sub menu link. To do it we will create a custom class for each one and add a background image.


.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
Step 4

Conclusion

We’ve successfully created this pure CSS3 dropdown menu. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.


Preview

Download Dropdown Menu




86 Comments

  1. Mrinal Apr 13, 3:27 pm
  2. Simon Apr 13, 6:39 pm
  3. Valeriu Apr 13, 7:31 pm
  4. NativeHacker Apr 14, 6:47 pm
  5. Trevor Geene Apr 15, 3:16 am
  6. Hendriks Apr 16, 2:19 pm
  7. Valeriu Apr 16, 2:35 pm
  8. Wojciech Apr 16, 3:10 pm
  9. Valeriu Apr 16, 4:25 pm
  10. Wojciech Fornal Apr 16, 9:00 pm
  11. Valeriu Apr 16, 9:34 pm
  12. Eliezer Apr 17, 3:33 am
  13. Valeriu Apr 17, 4:33 am
  14. Sls Apr 17, 6:14 pm
  15. Valeriu Apr 17, 6:17 pm
  16. Oakley Apr 23, 9:17 pm
  17. Valeriu Apr 24, 1:26 am
  18. Oakley Apr 27, 5:48 am
  19. Valeriu May 16, 2:34 pm
  20. Jerry May 14, 8:31 pm
  21. Valeriu May 16, 2:35 pm
  22. Emilio Cobos May 21, 4:45 pm
  23. Kj Jun 3, 12:35 am
  24. Dirk Jan 12, 9:26 pm
  25. drock8787 Jun 14, 2:47 am
  26. pijush Jun 15, 8:09 pm
  27. renwar Jun 28, 11:24 pm
  28. Kishan Jul 3, 2:49 pm
  29. Dylan Sep 15, 7:56 am
  30. Ian Haney Sep 25, 1:37 pm
  31. Valeriu Sep 27, 1:30 pm
  32. keryn gill Oct 3, 11:24 pm
  33. nisan Oct 7, 1:49 pm
  34. Ivanka Nov 20, 2:56 am
  35. Mokarram Nov 26, 8:55 am
  36. CW Dec 1, 11:52 pm
  37. Valeriu Dec 14, 1:56 am
  38. Danny Jan 10, 7:25 pm
  39. Danny Jan 10, 8:13 pm
  40. Pieter Schepens Jan 14, 10:47 pm
  41. Keryn Gill Jan 17, 9:15 pm
  42. Jeff Jan 19, 5:55 am
  43. Shulkran Jan 19, 6:04 pm
  44. martin Jan 25, 11:09 pm
  45. Keryn Gill Feb 5, 1:43 am
  46. mbop Apr 2, 7:01 am
  47. Ali Arshad Shaikh Feb 10, 7:48 am
  48. Maximiliano Feb 28, 11:32 pm
  49. MikeM Mar 2, 12:17 am
  50. MattF Mar 12, 8:46 am
  51. MattF Mar 12, 9:01 am
  52. mostwanted Mar 20, 1:41 pm
  53. tHE Queen Mar 23, 5:18 pm
  54. george Mar 25, 5:57 pm
  55. WB Mar 26, 12:52 pm
  56. Alberto Mar 28, 12:07 pm
  57. Alberto Mar 28, 12:25 pm
  58. shil Apr 7, 6:26 am
  59. mbop Apr 8, 8:28 pm
  60. Mohammad Reza May 4, 5:42 pm
  61. Valery May 27, 9:02 am
  62. Christie Feb 20, 5:26 am
  63. Manish Jun 11, 2:53 am
  64. bohr Jun 13, 6:45 pm
  65. Simon Jul 3, 11:46 pm
  66. Saara Jul 10, 3:49 pm
  67. Mohsen Jul 19, 4:54 pm
  68. Justin Aug 4, 5:51 pm
  69. Sachindra Singh Aug 6, 12:55 pm
  70. Carlton Stith Aug 8, 3:41 am
  71. Mr. O'Neill Aug 14, 2:49 pm
  72. Christie Feb 20, 4:07 am
  73. Tara Sep 7, 3:09 am
  74. matzone Oct 4, 7:53 pm
  75. John Oct 5, 2:30 am
  76. Spencer Oct 18, 11:58 am
  77. aswanbi Jan 22, 7:52 am
  78. Taylor Feb 15, 5:59 am
  79. Zeegroo May 2, 11:42 pm
  80. sotb May 6, 2:11 pm
  81. sotb May 6, 2:32 pm
  82. sotb May 21, 10:30 am
  83. kenneth May 21, 5:52 pm
  84. Robert May 22, 5:19 pm
  85. alitaba May 28, 1:50 pm
  86. alitaba Jun 3, 3:36 pm