Creating a Drop Down Menu
1. Right click and save csshover3.htc to your computer (no need to edit this code). Upload it from your computer into your file manager.


2. Right click and save menuh.css to your computer (you can edit this to change the navigation color -- currently blue)

If you want to change the Color of the drop down menu

Once this file is downloaded to your computer, right click on it and choose to open it with wordpad (you can also open wordpad first by going to your Start Menu --> Programs --> Accessories --> Wordpad and then open up the css file.
This is only a guide and we will not be able to provide assistance in troubleshooting any html issues. There is some html editing involved to get the dropdown menu to work properly.


Example
3. Copy and Paste this code into the header tag of your webpage.


<style type="text/css" media="screen"> @import url("menuh.css"); </style>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover3.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>


4. Copy and Paste this code into an html element (Here is where you will want to edit the html code -- Below this code is an explanation)

<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">Home</a>
<ul>
<li><a href="#">Sub Home 1</a></li>
<li><a href="#">Sub Home 2</a></li>
<li><a href="#">Sub Home 3</a></li>
<li><a href="#">Sub Home 4</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" >About</a>
                   <ul>
<li><a href="#">Sub About 1</a></li>
<li><a href="#">Sub About 2</a></li>
<li><a href="#">Sub About 3</a></li>
<li><a href="#">Sub About 4</a></li>
</ul>
</li>

</ul>

<ul>
<li><a href="#" >FAQ</a>
                   <ul>
<li><a href="#">Sub FAQ 1</a></li>
<li><a href="#">Sub FAQ 2</a></li>
<li><a href="#">Sub FAQ 3</a></li>
<li><a href="#">Sub FAQ 4</a></li>
</ul>
</li>

</ul>

<ul>
<li><a href="#" >Contact</a>
                   <ul>
<li><a href="#">Sub Contact 1</a></li>
<li><a href="#">Sub Contact 2</a></li>
<li><a href="#">Sub Contact 3</a></li>
<li><a href="#">Sub Contact 4</a></li>
</ul>
</li>

</ul>


</div> <!-- end the menuh-container div --> 
</div><!-- end the menuh div -->





How the Code Works

With the code above, you can simply change out the Names and put in your own. You will see that current categories are Home, About, FAQ, and Contact. Under each category are 4 subcategories. Again you can simply alter the names.

Each category is controlled by a few lines of html elements. The code for one category box is

<ul>
<li><a href="#" >Category Header</a>

<ul>
<li><a href="#">Sub Category Header 1</a></li>
<li><a href="#">Sub Category Header 2</a></li>
<li><a href="#">Sub Category Header3</a></li>
<li><a href="#">Sub Category Header 4</a></li>
</ul>

</li>
</ul>


The a href section is where you enter in the URL for that specific link. Delete the # and replace it with the full URL (including http://) to that page.

EX. <li><a href="http://www.domain.com/aboutus.html">About Us</a>

If you need more categories, simply copy the above category box section into the html element (right before the </div></div>) and change the names. It will take a little getting use to, but it is fairly easy to edit.

In the file you need to change one section to alter the color. If you click Ctrl F on your keyboard you can do a search for 1446AC to find this area.
Change the 6 digit hex number to the color you want. Use this color wheel site to choose a color and get the Hex Number. Once you have changed the color, save the css file and upload it into your file manger.

NOTE: If you are comfortable with coding you can alter the dropdown menu. The above code only controls the color, but you can change font style, hovering options, etc...