.fontNormal {
  font-family:verdana; font-size:14px;
  color:#000000;
}
.fontOn {
  font-family:verdana; font-size:14px;
  color:#ffffff;
}
.fontDown {
  font-family:verdana; font-size:14px;
  color:#ffffff;
  font-style:italic;
}
</pre>
<p class="para">and tell the script to use <font color="red">class="itemNormal"</font> for item at normal stage and <font color="red">class="fontNormal"</font> for item text at normal stage, "itemOn" and "fontOn" for highlighted stage, and "itemDown" and "fontDown" for mousedowned stage, like this:</p>
<div id="one">&nbsp;</div>

<p class="note"><font color="red">Note:</font> If you want to use background image for menu items, define the "background:url(...)" property in the item classes and remove the "background-color" property.</p>

<br><p class="para">As you can notice, the sub-menu tag layer and the image icon layer are just "empty" SPAN tags, we would set the background image in the CSS classes for them, for example:</p>
<pre>
.tagNormal {
  <font color="red">float:right</font>; width:15px; height:15px;
  background:url("tag.jpg") no-repeat center;
}
.tagOn {
  <font color="red">float:right</font>; width:15px; height:15px;
  background:url("tagOn.jpg") no-repeat center;
}
.tagDown {
  <font color="red">float:right</font>; width:15px; height:15px;
  background:url("tagDown.jpg") no-repeat center;
}
.tagSubMenu {
  <font color="red">float:right</font>; width:15px; height:15px;
  background:url("tagSub.jpg") no-repeat center;
}

.iconOn {
  <font color="red">float:left</font>; width:15px; height:15px;
  background:url("iconOn.jpg") no-repeat center;
}
.iconDown {
  <font color="red">float:left</font>; width:15px; height:15px;
  background:url("iconDown.jpg") no-repeat center;
}
</pre>
<p class="para">The "float" property will decide to which side of the item the image should show up.</p>

<br><p class="para">For separator items, you can use one line or two lines, both defined in the following format, for example:</p>
<pre>
.separator { background-color:#336699; }
</pre>
<p class="para">For two lines such as:</p>
<div id="sep">&nbsp;</div><br><br><br>
<p class="para">you can have:</p>
<pre>
.separatorTopLine { background-color:#003366; }
.separatorBottomLine { background-color:#6699cc; }
</pre>

<p class="para">By default, the line size would be just one pixel, if you have a drop-down menu, you can specify the height of the separator line:</p>
<pre>
.separator { background-color:#6699cc; height:2px; }
</pre>
<p class="para">or if you have a menu bar:</p>
<div id="sep2">&nbsp;</div>
<p class="para">you can specify the width:</p>
<pre>
.separator { background-color:#cc0000; width:3px; }
</pre>
<p class="para">If you want to use image as separator, you can make it like this:</p>
<pre>
.separator { background:url("separator.gif"); }
</pre>
<p class="para">and if you want to set the height of it for a drop-down menu:</p>
<div id="sep3">&nbsp;</div><br><br><br>
<p class="para">you could have:</p>
<pre>
.separator { background:url("separator.gif"); overflow:hidden; height:6px; }
</pre>
<p class="para">and for a menu bar:</p>
<div id="sep4">&nbsp;</div><br><br>
<p class="para">you could have:</p>
<pre>
.separator { background:url("separator.gif"); overflow:hidden; width:6px; }
</pre>

<br><p class="note"><font color="red">Note:</font> Be careful when you use the <font color="red">margin</font> property in CSS classes since it's not counted into the width and height of an element.<br><br>
A basic rule in Menu G5 would be, use margin-top and margin-bottom only for items in drop-down menus, and margin-left and margin-right only for items in menu bar.<br><br>
Setting the item-offset in the addStylePad() call would be a safe way to have the margin effect.<br><br>
DO NOT use margin for non-image separators in menu bar.
</p>

<br><p class="para">Now let's look at a menu styling sample. We would have the following CSS definitions:</p>
<pre>
.holder { filter:
  progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#333333,strength=3)
  progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);
}
.bar { padding:2px; border-width:1px; border-style:solid; border-color:#000000; background-color:#336699; }

.itemTopNormal {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemTopOn {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc;
}
.itemTopDown {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
  border-color:#000033 #6699cc #6699cc #000033; background-color:#003366;
}

.itemSubNormal {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699;
}
.itemSubOn {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc;
}
.itemSubDown {
  filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
  width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
  border-color:#000033 #6699cc #6699cc #000033; background-color:#003366;
}

.fontNormal {
  font-family:verdana; font-size:14px;
  color:#000000;
}
.fontOn {
  font-family:verdana; font-size:14px;
  color:#ffffff;
}
.fontDown {
  font-family:verdana; font-size:14px;
  color:#ffffff;
  font-style:italic;
}

.tagNormal {
  float:right; width:10px; height:10px;
  background:url("images/tagRN2.gif") no-repeat center;
}
.tagOn {
  float:right; width:10px; height:10px;
  background:url("images/tagRH2.gif") no-repeat center;
}
.tagDown {
  float:right; width:10px; height:10px;
  background:url("images/tagRD2.gif") no-repeat center;
}
</pre>
<p class="para">It shows that we would like to apply a shadow filter and a random dissolve filter to the top-menu and the sub-menus when they show up, and to apply a pushing band filter to menu items when they are mouseovered. The text in top-menu items would be centralized but  stay left in sub-menus, and finally to set the font style to italic when items are mousedowned.</p>
<p class="para" id="demo">And our menu bar would look like this: [<a href="#" onclick="clickMenu('Demo'); return false;">show</a>]</p>
<a name="menu">
<p class="note"><font color="red">Note:</font> When you set the "width" property for the item CSS class, be sure to turn on the CSS-compliance mode for IE and Opera (include a DTD line in your page).</p>
<p class="note"><font color="#cc0000">Update for IE/Mac and Safari:</font> For css style defined in format of "class1 class2" in those addStyleXX() calls, IE/Mac and Safari can't handle them correctly. To workaround this issue, we need to combine the previously separated classes into one class for each item stage.</p>

<br><p class="para">Well, the menu content and the menu styles are all done, but how do we tell the script to apply which styles to which part of the menu content for our menu instances? Good question. That would be our next topic.</p>
<p class="para">[<a href="style2.html">Apply the style</a>]&nbsp;[<a href="../index.html#steps">Back to index page</a>]</p>
<p align="center"># # #</p>
<p>&nbsp;</p>
</body>
</html>