This is the page width

Here, one may want to refer to 082_DynamicList.html which is really the file being modified here, I retain the styles '.line1, #zx1, #zx2, and em', and delete 3 li style references. Furthermore, I also delete all previous notes.

1. Un-indent the entire list by setting the ul's margin-left to a negative value to compensate for the typical indentation. 2.5em is about the right amount.
   
   Because you're removing the list-style types, the normal indentation of list items will become a problem.
2. Format the li tags.
   
   Each li tag inside the menu structure should look something like a button. Use CSS to accomplish this task:
   
   a. Set 'list-style-type to none.
   b. Set a border with the border attribute.
   c. Center the text by setting text-align to center.
   d. Add a background color or image, you'll get some strange border bleed-through later when the buttons overlap.
      in the 'display anchors as buttons'
   
3. Format the anchors as follows; e. Take out the underline with text-decoration: none.
   f. Give the anchor a consistent color.
   g. Set display to block (so the entrie area will be clickable, not just the text(.
4. Give some indication it's an anchor by changing the backgro9und when the user hovers on the element.
   
   Because the anchors no longer look like anchors, you have to do something else to indicate there's something special about these elements. When the user moves the mouse over any anchor tag in the menu div, that anchor's background color will switch to white.
5. Collapse the menus using the hidden menus trick (discussed in the section “Hiding the inner lists,” earlier in this chapter) to hide all the sublists
6. Display the hidden menus when the mouse hovers on the parent element by adding the code described in the “Getting the inner lists to appear on cue” section: