How To Create Multilevel Dropdown Menu Using HTML/CSS

[xSaoLx]

In the previous tutorial, we create Mega Menu using the script. In this article, we are going to learn on How To Create Multilevel Dropdown Menu Using HTML/CSS without script. This source code is very simple and easy, and it's a pure CSS and HTML only.

Multilevel Menu - HTML

This HTML source code is used for displaying menu in multilevel.

1. <ul
   
   id
   
   =
   
   "menu"
   
   >
   
2. <li
   
   class
   
   =
   
   "first_Menu"
   
   ><a
   
   href
   
   =
   
   "#"
   
   >
   
   Menu 1</
   
   a
   
   >
   
3. <ul
   
   class
   
   =
   
   "sub_Menu"
   
   >
   
4. <li
   
   class
   
   =
   
   "first_Menu"
   
   ><a
   
   href
   
   =
   
   "#"
   
   >
   
   Example 1 <span
   
   class
   
   =
   
   "expand"
   
   >
   
   &raquo;
   
   </
   
   span
   
   ></
   
   a
   
   >
   
5. <ul
   
   class
   
   =
   
   "sub_Menu"
   
   >
   
6. <li
   
   ><a
   
   href
   
   =
   
   "#"
   
   >
   
   Example 1.1</
   
   a
   
   ></
   
   li
   
   >
   
7. <li
   
   ><a
   
   href
   
   =
   
   "#"
   
   >
   
   Example 1.2</
   
   a
   
   ></
   
   li
   
   >
   
8. <li
   
   ><a
   
   href
   
   =
   
   "#"
   
   >
   
   Example 1.3</
   
   a
   
   ></
   
   li
   
   >
   
9. </
   
   ul
   
   >
   
10. </
    
    li
    
    >
    
11. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2</
    
    a
    
    ></
    
    li
    
    >
    
12. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 3</
    
    a
    
    ></
    
    li
    
    >
    
13. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 4</
    
    a
    
    ></
    
    li
    
    >
    
14. </
    
    ul
    
    >
    
15. </
    
    li
    
    >
    
16. <li
    
    class
    
    =
    
    "first_Menu"
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Menu 2</
    
    a
    
    >
    
17. <ul
    
    class
    
    =
    
    "sub_Menu"
    
    >
    
18. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 1</
    
    a
    
    ></
    
    li
    
    >
    
19. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2</
    
    a
    
    ></
    
    li
    
    >
    
20. <li
    
    class
    
    =
    
    "first_Menu"
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 3<span
    
    class
    
    =
    
    "expand"
    
    >
    
    &raquo;
    
    </
    
    span
    
    ></
    
    a
    
    >
    
21. <ul
    
    class
    
    =
    
    "sub_Menu"
    
    >
    
22. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    nowrap>
    
    Example 3.1</
    
    a
    
    ></
    
    li
    
    >
    
23. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    nowrap>
    
    Example 3.2</
    
    a
    
    ></
    
    li
    
    >
    
24. </
    
    ul
    
    >
    
25. </
    
    li
    
    >
    
26. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 4</
    
    a
    
    ></
    
    li
    
    >
    
27. </
    
    ul
    
    >
    
28. </
    
    li
    
    >
    
29. <li
    
    class
    
    =
    
    "first_Menu"
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Menu 3</
    
    a
    
    >
    
30. <ul
    
    class
    
    =
    
    "sub_Menu"
    
    >
    
31. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 1</
    
    a
    
    ></
    
    li
    
    >
    
32. <li
    
    class
    
    =
    
    "first_Menu"
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2 <span
    
    class
    
    =
    
    "expand"
    
    >
    
    &raquo;
    
    </
    
    span
    
    ></
    
    a
    
    >
    
33. <ul
    
    class
    
    =
    
    "sub_Menu"
    
    >
    
34. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2.1</
    
    a
    
    ></
    
    li
    
    >
    
35. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2.2</
    
    a
    
    ></
    
    li
    
    >
    
36. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 2.3</
    
    a
    
    ></
    
    li
    
    >
    
37. </
    
    ul
    
    >
    
38. </
    
    li
    
    >
    
39. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 3</
    
    a
    
    >
    
40. </
    
    li
    
    >
    
41. <li
    
    ><a
    
    href
    
    =
    
    "#"
    
    >
    
    Example 4</
    
    a
    
    ></
    
    li
    
    >
    
42. </
    
    ul
    
    >
    
43. </
    
    li
    
    >
    
44. </
    
    ul
    
    >
    

Multilevel Menu - CSS

And, this is our style.

1. <style type=
   
   "text/css"
   
   >
   
2. #menu
   
   {
   
3. width
   
   :
   
   400px
   
   ;
   
4. margin
   
   :
   
   auto
   
   ;
   
5. }
   
6. .first_Menu
   
   {
   
7. display
   
   :
   
   block
   
   ;
   
8. position
   
   :
   
   relative
   
   ;
   
9. float
   
   :
   
   left
   
   ;
   
10. line-height
    
    :
    
    30px
    
    ;
    
11. background-color
    
    :
    
    blue
    
    ;
    
12. border-right
    
    :
    
    blue
    
    1px
    
    solid
    
    ;
    
13. }
    
14. .first_Menu
    
    a {
    
15. margin
    
    :
    
    10px
    
    ;
    
16. color
    
    :
    
    #FFFFFF
    
    ;
    
17. font-size
    
    :
    
    20px
    
    ;
    
18. text-decoration
    
    :
    
    none
    
    ;
    
19. }
    
20. .first_Menu
    
    :
    
    hover
    
    >
    
    ul {
    
21. display
    
    :
    
    block
    
    ;
    
22. position
    
    :
    
    absolute
    
    ;
    
23. }
    
24. .sub_Menu
    
    {
    
25. display
    
    :
    
    none
    
    ;
    
26. }
    
27. .sub_Menu
    
    li {
    
28. background-color
    
    :
    
    azure
    
    ;
    
29. line-height
    
    :
    
    30px
    
    ;
    
30. border-bottom
    
    :
    
    #CCC
    
    1px
    
    solid
    
    ;
    
31. border-right
    
    :
    
    #CCC
    
    1px
    
    solid
    
    ;
    
32. width
    
    :
    
    100%
    
    ;
    
33. }
    
34. .sub_Menu
    
    li a {
    
35. color
    
    :
    
    #000000
    
    ;
    
36. }
    
37. ul {
    
38. list-style
    
    :
    
    none
    
    ;
    
39. margin
    
    :
    
    0
    
    ;
    
40. padding
    
    :
    
    0px
    
    ;
    
41. min-width
    
    :
    
    10em
    
    ;
    
42. }
    
43. ul ul ul {
    
44. left
    
    :
    
    100%
    
    ;
    
45. top
    
    :
    
    0
    
    ;
    
46. margin-left
    
    :
    
    1px
    
    ;
    
47. }
    
48. li:
    
    hover
    
    {
    
49. background-color
    
    :
    
    red
    
    ;
    
50. }
    
51. .first_Menu
    
    li:
    
    hover
    
    {
    
52. background-color
    
    :
    
    #d0d0d0
    
    ;
    
53. }
    
54. .expand
    
    {
    
55. font-size
    
    :
    
    12px
    
    ;
    
56. float
    
    :
    
    right
    
    ;
    
57. margin-right
    
    :
    
    5px
    
    ;
    
58. }
    
59. </style>
    

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download