Creating Your Menu in HTML

• 1). Create the div container that will house your navigation bar. Give your navigation div a unique ID, such as "nav_menu":
  
  <div>
  
  </div>
  
  
• 2). Create the unordered list that will wrap your individual list items. Give this unordered list an ID, such as "navigation":
  
  <div>
  
  <ul>
  
  </ul>
  
  </div>
  
  
• 3). Create list items for each of the top items on your navigation bar. Wrap each item in an opening and closing "li" tag as well as an anchor tag to link each item to a page on your website:
  
  <div>
  
  <ul>
  
  <li>
  
  <a href="/links/?u=testpage.html">
  
  This is a test page
  
  </a>
  
  </li>
  
  </ul>
  
  </div>
  
  
• 4). Create an unordered list for your sub-pages. Place the new unordered list directly before the closing </li> tag of the parent page:
  
  <div>
  
  <ul>
  
  <li>
  
  <a href="/links/?u=testpage.html">
  
  This is a test page
  
  </a>
  
  <ul>
  
  </ul>
  
  </li>
  
  </ul>
  
  </div>
  
  
• 5). Create list items for each of your sub-pages. Place these list items inside of the unordered list you created in Step 4:
  
  <div>
  
  <ul>
  
  <li>
  
  <a href="/links/?u=testpage.html">
  
  This is a test page
  
  </a>
  
  <ul>
  
  <li>
  
  <a href="/links/?u=subpage.html">
  
  This is a sub page
  
  </a>
  
  </li>
  
  </ul>
  
  </li>
  
  </ul>
  
  </div>
  
  

Creating CSS to Control Your Menu

• 1). Open your Web page's cascading style sheet (CSS). Create a new entry for the div container you created to house your navigation menu in Section 1, Step 1:
  
  #nav_menu {
  
  }
  
  Give your div container block display and fixed width styles. Choose a width that will fit inside of your page's main container. Here is an example of a menu that is 900 pixels wide:
  
  #nav_menu {
  
  display: block;
  
  width: 900px;
  
  }
  
  
• 2). Create an entry for your unordered list from Section 1, Step 2 in your CSS file:
  
  #navigation {
  
  }
  
  Set your unordered list's margins to "0" and its list style to "none":
  
  #navigation {
  
  list-style: none;
  
  margin: 0;
  
  }
  
  
• 3). Create an entry for your main list items from Section 1, step 3 in your CSS file:
  
  #navigation li {
  
  }
  
  Set your list items to float left and have a fixed width of your choosing:
  
  #navigation li {
  
  float:left;
  
  width:200px;
  
  }
  
  
• 4). Create an entry for the secondary unordered lists that will contain your sub pages:
  
  #navigation li ul {
  
  }
  
  Set the display and list style values to "none":
  
  #navigation li ul {
  
  display:none;
  
  list-style:none;
  
  }
  
  
• 5). Create an entry for you secondary unordered lists and how they should behave when their parent list item is hovered over:
  
  #navigation li:hover ul {
  
  }
  
  Set the display value of the secondary unordered list to "block":
  
  #navigation li:hover ul {
  
  display:block;
  
  }
  
  
• 6). Save your files and upload them to your server.