The first thing to do when creating a navigation menu is decide how many main menu items you want.

Identify the main menu buttons.
See picture for example

Next decide what dropdowns you want for these main buttons.


Then for each dropdown identify any flyouts.

Now we’ll create the order for the code.

List them verticaly as shown.
Starting on the left down through
each dropdown and flyout.

The order is important.

We are ready to add some code.  

Add one of these for each menu item.

<li><a href="Place link here">Button name here</a></li>

Indent each level with spaces.

         *** See code below ***

<div class="menu">							
  <li><a href="Link">Menu 1</a></li>
  <li><a href="Link">Menu 2</a></li>
      <li><a href="Link">Drop 1</a></li>
      <li><a href="Link">Drop 2</a></li>
  <li><a href="Link">Menu 3</a></li>
      <li><a href="Link">Drop 1</a></li>
          <li><a href="Link">Flyout 1</a></li>
          <li><a href="Link">Flyout 2</a></li>
      <li><a href="Link">Drop 2</a></li>
          <li><a href="Link">Flyout 1</a></li>
          <li><a href="Link">Flyout 2</a></li>
      <li><a href="Link">Drop 3</a></li>
  <li><a href="Link">Menu 4</a></li>
  <li><a href="Link">Menu 5</a></li>
  <li><a href="Link">Menu 6</a></li>
</div>
	

Start each container with <ul> and end it with </ul>
Don't forget the main list.


*** See code below ***

Note: Do not add the gold

<div class="menu">
<ul>
  <li><a href="Place link here">Menu 1</a></li>
  <li><a class="drop" href="Place link here">Menu 2
        <ul>
        <li><a href="Place link here">Drop 1</a></li>
        <li><a href="Place link here">Drop 2</a></li>
        </ul>  <!-- This closes Menu 2 container-->
  </li>
  <li><a class="drop" href="Place link here">Menu 3
        <ul>  
        <li><a class="drop" href="Place link here">Drop 1
                <ul>
                  <li><a href="Place link here">Flyout 1</a></li>
                  <li><a href="Place link here">Flyout 2</a></li>
                </ul>  <!-- This closes Drop 1 container-->
        </li>
        <li><a class="drop" href="Place link here">Drop 2
                <ul>
                  <li><a href="Place link here">Flyout 1</a></li>
                  <li><a href="Place link here">Flyout 2</a></li>
                </ul>  <!-- This closes Drop 2 container-->
        </li>
        <li><a href="Place link here">Drop 3</a></li>
        </ul>  <!-- This closes Menu 3 container-->
  </li>
  <li><a href="Place link here">Menu 4</a></li>
  <li><a href="Place link here">Menu 5</a></li>
  <li><a href="Place link here">Menu 6</a></li>
</ul>  <!-- This closes Main Menu container-->
</div>
										

We’re almost done if it wasn’t for IE, ugh!

Have to add a little hack for IE.





After every line with class="drop" add these.

   <!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->


After every </ul> add this.

   <!--[if lte IE 6]></td></tr></table></a><![endif]-->


See next picture to see it added.

Here you can see the above IE code inserted.
Additional flyouts were added under Menu 3 and 6
*** See code below ***
The last menu item, "Menu 6", has flyouts that are positioned to flyout left instead of right.

<div class="menu">
<ul>
   <li><a href="Link">Menu 1</a></li>
   <li><a class="drop" href="Link">Menu 2
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
         <li><a href="Link">Drop 1</a></li>
         <li><a href="Link">Drop 2</a></li>
        </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a class="drop" href="Link">Menu 3
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
         <li><a class="drop" href="Link">Drop 1 >
                <!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                 <li><a href="Link">D1 Flyout 1</a></li>
                 <li><a class="drop" href="Link">D1 Flyout 2 >
                     <!--[if gte IE 7]><!--></a><!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul>
                      <li><a href="Link">D1FO2 Flyout 1</a></li>
                      <li><a href="Link">D1FO2 Flyout 2</a></li>
                     </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </li>
                </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a class="drop" href="Link">Drop 2 >
                <!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                 <li><a href="Link">D2 Flyout 1</a></li>
                 <li><a href="Link">D2 Flyout 2</a></li>
                </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
         <li><a href="Link">Drop 3</a></li>
        </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="Link">Menu 4</a></li>
   <li><a href="Link">Menu 5</a></li>
   <li><a class="drop" href="Link">Menu 6
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="main6DD">   <!-- assigns class so it can be formated in CSS -->
         <li><a href="Link">Drop 1</a></li>
         <li><a class="drop" href="Link">< Drop 2
                <!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="main6FO">   <!-- assigns class so it can be formated in CSS -->
                 <li><a href="Link">D2 Flyout 1</a></li>
                 <li><a class="drop" href="Link">< D2 Flyout 2
                     <!--[if gte IE 7]><!--></a><!--<![endif]-->
                     <!--[if lte IE 6]><table><tr><td><![endif]-->
                     <ul class="main6FO">   <!-- assigns class so it can be formated in CSS -->
                      <li><a href="Link">D2FO2 Flyout 1</a></li>
                      <li><a href="Link">D2FO2 Flyout 2</a></li>
                     </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                 </li>
                </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
        </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
</ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>										

Add the menu text and links for each and ....

Voila!! Done.
Almost
You'll need to also add some CSS code for the formating of the menu.

> > > Go to CSS page Click Here < < <
Test it out by hovering the Menu at the top of this page.

Do not copy directly from a word processing
program to the header customize box.
Copy and paste into notepad, then copy from
notepad and put in your header customize box.