Post
Ask Question

Create CSS Dropdown Menu Using HTML 5

Introduction  

 
CSS menus are created using formatting and positioning of standard HTML. The underlying structure is simply a nested list. The visible portion of the menu is the outermost list, and the drop-down portions are sublists. Each item in the list is a link to the content. The associated formatting of the sheet changes the display of the submenus depending on whether or not the mouse is over the outer list item. Depending on the method used, the submenu may be set to display off the screen, or not be displayed at all unless the mouse is over the "Home title". When the mouse hovers over the title, the inner list is displayed overlapping the outer, so that the Home "drops down".  
 
In fact, however, keyboard navigation is virtually impossible with this kind of menu because, while the tab key moves the "focus" to the submenu items, the user has no way of knowing what item is currently selected, or even what items are available. The only items that can be reliably accessed are those of the outer list.  
 
Step 1: Open Macromedia Dreamweaver.  
 
Step 2: Then create a new document by clicking the File menu then New Document.
 
Click the Create button.
 
newdocument.jpg
 
Step 3: HTML 5 Doctype:
  1. <!DOCTYPE html>  
  2. <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Title </title>  
  6. </head>  
  7. <body>  
  8.     Create Text here  
  9. </body>  
  10. </html> 
Step 4: Define the body part and set the content of the CSS Dropdown Menu:  
 
Code
  1. <nav>  
  2. <ul>  
  3. <li><a href="#">Home</a>  
  4.  <ul>  
  5.      <li><a href="#">SubMenu Text here 1</a> </li>  
  6.      <li><a href="#">SubMenu Text here 2</a> </li>  
  7.      <li><a href="#">SubMenu Text here 3</a> </li>  
  8.      <li><a href="#">SubMenu Text here 4</a>  
  9.          <ul>  
  10.              <li><a href="#">SubMenu Lable 2 Text here 1</a> </li>  
  11.              <li><a href="#">SubMenu Lable 2 Text here 2</a> </li>  
  12.              <li><a href="#">SubMenu Lable 2 Text here 3</a> </li>  
  13.              <li><a href="#">SubMenu Lable 2 Text here 4</a> </li>  
  14.              <li style="border-bottom: none;"><a href="#">SubMenu Text Lable 2 here 5</a> </li>  
  15.          </ul>  
  16.      </li>  
  17.      <li style="border-bottom: none;"><a href="#">SubMenu Text here 5</a> </li>  
  18.  </ul>  
  19. </li>  
  20. <li><a href="#">About us</a></li>  
  21. <li><a href="#">Services</a></li>  
  22. <li><a href="#">Portfolio</a></li>  
  23. <li><a href="#">Contact</a></li>  
  24. </ul>   
  25. </nav> 
Step 5: Apply the stylesheet of the Dropdown Menu:  
 
Code
  1. <style>  
  2. *  
  3. {  
  4.  margin: 0px;  
  5.  padding: 0px;  
  6. }  
  7. body  
  8. {  
  9.  background: #6d0086;  
  10. }     
  11. nav  
  12. {  
  13.  background: #36004d;  
  14.  float: left;  
  15.  width: 100%;  
  16.  height: 40px;  
  17.  margin: 0px 0 2px 0px;  
  18.  border-bottom: 2px solid #d298e7;  
  19. }     
  20. nav ul  
  21. {  
  22.  float: right;  
  23.  margin: 0px;  
  24.  padding: 0px;  
  25.  list-style: none;  
  26.  display: inline;  
  27. }     
  28. nav ul li  
  29. {  
  30.  float: left;  
  31.  list-style: none;  
  32.  display: inline;  
  33.  position: relative;  
  34.  line-height: 23px;  
  35. }     
  36. nav ul li a  
  37. {  
  38.  float: left;  
  39.  list-style: none;  
  40.  display: block;  
  41.  padding: 4px 22px;  
  42.  border-left: 1px solid #0e0313;  
  43.  border-right: 1px solid #5f016f;  
  44.  color: #fff;  
  45.  text-decoration: none;  
  46.  font-size: 14px;  
  47.  font-family: "Myriad Pro" , Arial;  
  48. }     
  49. nav ul li ul  
  50. {  
  51.  display: none;  
  52. }  
  53. nav ul li:hover ul  
  54. {  
  55.  width: 187px;  
  56.  display: block;  
  57.  float: left;  
  58.  position: absolute;  
  59.  left: 0px;  
  60.  top: 29px;  
  61.  background: #36004d;  
  62.  border: 1px solid #36004d;  
  63.  z-index: 9999 !important;  
  64. }  
  65. nav ul li:hover ul li  
  66. {  
  67.  margin: 0 5px;  
  68.  padding: 0px;  
  69.  display: inline;  
  70.  float: left;  
  71.  border-bottom: 1px dotted #dddddd;  
  72.  font-weight: normal;  
  73.  position: relative;  
  74.  background: none;  
  75. }     
  76. nav ul li:hover ul li a  
  77. {  
  78.  font-weight: normal;  
  79.  padding: 0px;  
  80.  float: none;  
  81.  width: 168px;  
  82.  display: block;  
  83.  padding: 0px 0 0px 9px;  
  84.  font-size: 11px;  
  85.  line-height: 25px;  
  86.  height: 25px  
  87.  border-left: none !important;  
  88.  border-right: none !important;  
  89. }     
  90. nav ul li:hover ul li a:hover  
  91. {  
  92.  background: #d298e7;  
  93.  color: #000000;  
  94. }     
  95. nav ul li:hover ul li ul  
  96. {  
  97.  display: none;  
  98. }  
  99. nav ul li:hover ul li:hover ul  
  100. {  
  101.  position: absolute;  
  102.  left: 170px;  
  103.  top: 0px;  
  104.  display: block;  
  105. }  
  106. </style> 
Step 6: Write the complete code for the developed simple CSS Dropdown Menu that uses the HTML 5 tools.
 
The complete application is:
  1. <!DOCTYPE html>  
  2. <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>Css Dropdown menu</title>  
  6. <style>  
  7.  *  
  8.  {  
  9.      margin: 0px;  
  10.      padding: 0px;  
  11.  }  
  12.  body  
  13.  {  
  14.      background: #6d0086;  
  15.  }         
  16.  nav  
  17.  {  
  18.      background: #36004d;  
  19.      float: left;  
  20.      width: 100%;  
  21.      height: 40px;  
  22.      margin: 0px 0 2px 0px;  
  23.      border-bottom: 2px solid #d298e7;  
  24.  }         
  25.  nav ul  
  26.  {  
  27.      float: right;  
  28.      margin: 0px;  
  29.      padding: 0px;  
  30.      list-style: none;  
  31.      display: inline;  
  32.  }         
  33.  nav ul li  
  34.  {  
  35.      float: left;  
  36.      list-style: none;  
  37.      display: inline;  
  38.      position: relative;  
  39.      line-height: 23px;  
  40.  }         
  41.  nav ul li a  
  42.  {  
  43.      float: left;  
  44.      list-style: none;  
  45.      display: block;  
  46.      padding: 4px 22px;  
  47.      border-left: 1px solid #0e0313;  
  48.      border-right: 1px solid #5f016f;  
  49.      color: #fff;  
  50.      text-decoration: none;  
  51.      font-size: 14px;  
  52.      font-family: "Myriad Pro" , Arial;  
  53.  }         
  54.  nav ul li:hover ul li a:hover  
  55.  {  
  56.      background: #d298e7;  
  57.      color: #000000;  
  58.  }         
  59.  nav ul li ul  
  60.  {  
  61.      display: none;  
  62.  }  
  63.  nav ul li:hover ul  
  64.  {  
  65.      width: 187px;  
  66.      display: block;  
  67.      float: left;  
  68.      position: absolute;  
  69.      left: 0px;  
  70.      top: 29px;  
  71.      background: #36004d;  
  72.      border: 1px solid #36004d;  
  73.      z-index: 9999 !important;  
  74.  }  
  75.  nav ul li:hover ul li  
  76.  {  
  77.      margin: 0 5px;  
  78.      padding: 0px;  
  79.      display: inline;  
  80.      float: left;  
  81.      border-bottom: 1px dotted #dddddd;  
  82.      font-weight: normal;  
  83.      position: relative;  
  84.      background: none;  
  85.  }         
  86.  nav ul li:hover ul li a  
  87.  {  
  88.      font-weight: normal;  
  89.      padding: 0px;  
  90.      float: none;  
  91.      width: 168px;  
  92.      display: block;  
  93.      padding: 0px 0 0px 9px;  
  94.      font-size: 11px;  
  95.      line-height: 25px;  
  96.      height: 25px;  
  97.      border-left: none !important;  
  98.      border-right: none !important;  
  99.  }  
  100.  nav ul li:hover ul li ul  
  101.  {  
  102.      display: none;  
  103.  }  
  104.  nav ul li:hover ul li:hover ul  
  105.  {  
  106.      position: absolute;  
  107.      left: 170px;  
  108.      top: 0px;  
  109.      display: block;  
  110.  }  
  111. </style>  
  112. </head>  
  113. <body>  
  114. <nav>  
  115.  <ul>  
  116.      <li><a href="#">Home</a>  
  117.          <ul>  
  118.              <li><a href="#">SubMenu Text here 1</a> </li>  
  119.              <li><a href="#">SubMenu Text here 2</a> </li>  
  120.              <li><a href="#">SubMenu Text here 3</a> </li>  
  121.              <li><a href="#">SubMenu Text here 4</a>  
  122.                  <ul>  
  123.                      <li><a href="#">SubMenu Lable 2 Text here 1</a> </li>  
  124.                      <li><a href="#">SubMenu Lable 2 Text here 2</a> </li>  
  125.                      <li><a href="#">SubMenu Lable 2 Text here 3</a> </li>  
  126.                      <li><a href="#">SubMenu Lable 2 Text here 4</a> </li>  
  127.                      <li style="border-bottom: none;"><a href="#">SubMenu Text Lable 2 here 5</a> </li>  
  128.                  </ul>  
  129.              </li>  
  130.              <li style="border-bottom: none;"><a href="#">SubMenu Text here 5</a> </li>  
  131.          </ul>  
  132.      </li>  
  133.      <li><a href="#">About us</a></li>  
  134.      <li><a href="#">Services</a></li>  
  135.      <li><a href="#">Portfolio</a></li>  
  136.      <li><a href="#">Contact</a></li>  
  137.  </ul>  
  138. </nav>  
  139. </body>  
  140. </html> 
Output
 
menuOutput.jpg


Similar Articles