How to Create Dropdown Menu Using Only CSS and HTML

Submitted by argie on Thursday, November 28, 2013 - 13:32.
In this Tutorial you will learn on how to make a horizontal drop down menu using only CSS and HTML. The best thing about this tutorial is I didn't used jquery and javascript for this menu. This is useful for thus programmer who want to make drop down menu without using jquery or javascript. This menu is easy to integrate in your current website, enjoy this tutorial and fallow the steps bellow.

Creating Our HTML Display

The code bellow include the
  • tag that display our menu. Copy the code bellow and save it as "index.php". 
    1. <html>
    2. <head>
    3. <title>CSS Tutorial</title>
    4. <link rel="stylesheet" href="style.css" media="screen">
    5. </head>
    6. <body>
    7. <div id="menu">
    8. 	<ul>
    9. 		<li><a class="active" href="#">Menu 1</a>
    10. 			<ul>
    11. 				<li><a href="#">Menu 1.1</a></li>
    12. 				<li><a href="#">Menu 1.2</a>
    13. 					<ul>
    14. 						<li><a href="#">Menu 1.2.1</a></li>
    15. 						<li><a href="#">Menu 1.2.2</a></li>
    16. 					</ul>
    17. 				</li>
    18. 			</ul>
    19. 		</li>
    20. 		<li><a href="#">Menu 2</a>
    21. 			<ul>
    22. 				<li><a href="#">Menu 2.1</a></li>
    23. 				<li><a href="#">Menu 2.2</a>
    24. 					<ul>
    25. 						<li><a href="#">Menu 2.2.1</a></li>
    26. 						<li><a href="#">Menu 2.2.2</a></li>
    27. 					</ul>
    28. 				</li>
    29. 			</ul>
    30. 		</li>
    31. 		<li><a href="#">Menu 3</a></li>
    32. 		<li><a href="#">Menu 4</a></li>
    33. 		<li><a href="#">Menu 5</a></li>
    34. 		<li><a href="#">Menu 6</a></li>
    35. 	</ul>
    36. </div>
    37. </body>
    38. </html>

    Creating Our CSS file

    The file bellow include the CSS file that make our drop down menu. Copy the code bellow and save it as "style.css".

    Designing Our Hover Effect

    The code bellow will make as display our second level menu when the first level menu is hovered. 
    1. #menu ul li:hover > ul {
    2. 	display: block;
    3. }
    4. #menu ul li a:hover > ul {
    5. 	display: block;
    6. }

    Designing Our First Level Menu

    the code menu include the css property of our menu id define on our html file. 
    1. #menu{
    2. 	width: auto;
    3. 	margin-top: 11px;
    4. }
    5. #menu ul ul {
    6. 	text-align:left !important;
    7. 	display: none;
    8. }
    9. #menu ul {
    10. 	list-style: none outside none;
    11. 	display: block;
    12. 	line-height:1px;
    13. 	padding:0;
    14. }
    15. #menu ul:after {
    16. display: block;
    17. }
    18. #menu ul li {
    19. 	float: left;
    20. 	position:relative;
    21. 	line-height:19px;
    22. }
    23. #menu > ul > li > a:hover {
    24. 	border-bottom: 4px solid #0097C4 !important;
    25. 	color:#0097C4;
    26. 	background-repeat: repeat;
    27. }
    28.  
    29. #menu ul li a {
    30. 	color: #666666;
    31. 	font-size: 12px;
    32. 	padding: 27px 15px 33px 15px;
    33. 	text-decoration: none;
    34. 	text-transform: uppercase;
    35. 	border-bottom: 4px solid #00FF00 !important;
    36. 	display: block;
    37. 	position: relative;
    38. 	transition: all 0.2s linear 0s;
    39. 	position:relative;
    40. }
    41. #menu .active{
    42. 	border-bottom: 4px solid #0097C4 !important;
    43. 	color:#0097C4;
    44. 	background-repeat: repeat;
    45. }

    Designing Our Second Level Menu

    Copy the code bellow and paste in our "style.css" file. The code bellow will design our second level menu and also include our hover effect to display our third level menu. 
    1. #menu ul ul {
    2. 	border-top: 1px solid #ECECEC !important;
    3. 	position: absolute;
    4. 	z-index:1;
    5. 	background-color: #FFFFFF;
    6. 	border: 1px solid #ECECEC;
    7. 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    8. 	margin-left:-1px !important;
    9. 	margin-top: 1px !important;
    10. }
    11. #menu ul ul li {
    12. 	float: none;
    13. 	position: relative;
    14. 	margin-right: 0 !important;
    15. 	width:230px;
    16. 	line-height:19px;
    17. 	margin: -1px 0 0;
    18. 	border-left: medium none;
    19. }
    20. #menu ul ul li a {
    21. 	font-size: 12px;
    22. 	padding: 8px 10px !important;
    23. 	text-transform: uppercase;
    24. 	border: medium none !important;
    25. 	border-bottom: 1px solid #ECECEC !important;
    26. }	
    27. #menu > ul > li > ul > li > a:hover {
    28. 	color: #0097C4 !important;
    29. }

    Designing Our Third Level Menu

    Copy the code bellow and paste in our "style.css" file. The code bellow will design our third level menu. 
    1. #menu ul ul ul {
    2. 	position: absolute; left: 100%; top:0;
    3. 	width:230px;
    4. }
    5. #menu ul ul ul li a {
    6. 	padding: 8px 10px;
    7. }
    8. #menu ul ul ul li a:hover {
    9. 	color: #0097C4 !important;
    10. }

    Summary of our style.css

    The code bellow is the correct arrange of our "style.css" file. 
    1. #menu ul li:hover > ul {
    2. 	display: block;
    3. }
    4. #menu ul li a:hover > ul {
    5. 	display: block;
    6. }
    7. #menu{
    8. 	width: auto;
    9. 	margin-top: 11px;
    10. }
    11. #menu ul ul {
    12. 	text-align:left !important;
    13. 	display: none;
    14. }
    15. #menu ul {
    16. 	list-style: none outside none;
    17. 	display: block;
    18. 	line-height:1px;
    19. 	padding:0;
    20. }
    21. #menu ul:after {
    22. display: block;
    23. }
    24. #menu ul li {
    25. 	float: left;
    26. 	position:relative;
    27. 	line-height:19px;
    28. }
    29. #menu > ul > li > a:hover {
    30. 	border-bottom: 4px solid #0097C4 !important;
    31. 	color:#0097C4;
    32. 	background-repeat: repeat;
    33. }
    34.  
    35. #menu ul li a {
    36. 	color: #666666;
    37. 	font-size: 12px;
    38. 	padding: 27px 15px 33px 15px;
    39. 	text-decoration: none;
    40. 	text-transform: uppercase;
    41. 	border-bottom: 4px solid #00FF00 !important;
    42. 	display: block;
    43. 	position: relative;
    44. 	transition: all 0.2s linear 0s;
    45. 	position:relative;
    46. }
    47. #menu .active{
    48. 	border-bottom: 4px solid #0097C4 !important;
    49. 	color:#0097C4;
    50. 	background-repeat: repeat;
    51. }
    52. #menu ul ul {
    53. 	border-top: 1px solid #ECECEC !important;
    54. 	position: absolute;
    55. 	z-index:1;
    56. 	background-color: #FFFFFF;
    57. 	border: 1px solid #ECECEC;
    58. 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    59. 	margin-left:-1px !important;
    60. 	margin-top: 1px !important;
    61. }
    62. #menu ul ul li {
    63. 	float: none;
    64. 	position: relative;
    65. 	margin-right: 0 !important;
    66. 	width:230px;
    67. 	line-height:19px;
    68. 	margin: -1px 0 0;
    69. 	border-left: medium none;
    70. }
    71. #menu ul ul li a {
    72. 	font-size: 12px;
    73. 	padding: 8px 10px !important;
    74. 	text-transform: uppercase;
    75. 	border: medium none !important;
    76. 	border-bottom: 1px solid #ECECEC !important;
    77. }	
    78. #menu > ul > li > ul > li > a:hover {
    79. 	color: #0097C4 !important;
    80. }
    81. #menu ul ul ul {
    82. 	position: absolute; left: 100%; top:0;
    83. 	width:230px;
    84. }
    85. #menu ul ul ul li a {
    86. 	padding: 8px 10px;
    87. }
    88. #menu ul ul ul li a:hover {
    89. 	color: #0097C4 !important;
    90. }
    That's the steps on how to create a drop down menu with CSS and HTML only. Hope this code will help you.

Tags

Add new comment

About text formats
  • 188 views