Go back

We are only working with the color coded parts, the look of the border and the font type & size.

Now let's get the menu drop downs lookin' goood.

Step 3
Changing the look of the css drop downs

The border & the Fonts in the drop down menu

Right click on the HTML object go to Properties then object HTML and look Inside Page header once again. At the very top you'll see this:

</style>

We're going to work with all of the code between that and the closing tag
(well except the text link stuff we did those already)

<style type="text/css">

More of the border styles

border: 1px solid black ;   controls the border of the drop down
1px can be made wider 2px 5px etc.
solid  is the border style, you can put double for example.  
...and the obvious color tag
Like:
border: 5px  double #ff0000 ;

#dropmenudiv{
position:absolute;
border: 1px solid black ;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height:18px;
z-index:100;
}

font: normal 12px Verdana; controls the fonts
normal can be italic for example
12px can be 10px
Veranda can be Arial
Like:
font: italic 10px Arial;

...and finally the third section that looks like this

End of the Step three page

outset

 inset

ridge

groove

dotted

dashed

solid

double

Okay the first section that looks like this....

#dropmenudiv a{
width: 100% ;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

width: 100%   leave that 100% it's the width of the text inside the box
text-indent: 3px;   indents the text over from the left in the box
border-bottom: 1px solid black; match this with the first section
text-decoration: none; you could put     
                               none    underline      overline   or   underline overline
font-weight: bold;  you can use normal bold bolder and lighter

The above controls the text back ground color and the font color when you put the mouse over the link inside the drop down menu.

}
#dropmenudiv a:hover{ /*hover background color*/
background-color: maroon ; color: white ;
}

...and the second section that looks like this

background-color: maroon ;   You can use a hex colors too #11400b  
color: white ; to text color on hover (mouseover) too like so:

background-color: #11400b ; color: wheat ;

Now that the text and the drop downs look the way you want, and everything is still working okay. 
On to step four where we'll work on the javascript a tiny bit so it'll work the way we want it to.

If you have any questions so far use the WS4 forum