Drop Down Menus

The first step to creating the dropdown menus seen at the top of this page was to add what CSS calls a "selector". this will define the properties of the dropdown. The code below was added to the style section of the template between the:
<style type="text/css"> tag and the </style> closing tag.

.dropdown {
font-family: arial;
font-size:10px;
font-weight: 500;
color: #000000;
width:140px;
background-color: #FFFFFF;
}

Then for each of the dropdown menus the following code was added below the header with the descriptions and links that you find at the top of the page. (Tip: you can view the page source and template with the Ctrl+U keys. You should be able to find the location of the blogatech dropdowns this way.)

<form name="linksmenu">
<select name="url" size="1" class="dropdown" onChange="location = this.options[this.selectedIndex].value;">
<option selected> DISPLAYED TITLE </option>
<option value="ADDRESS OF LINK ONE ">LINK ONE</option>
<option value="ADDRESS OF LINK TWO">LINK TWO</option>
</select>
</form>

You can add as many option lines as you want and you will have to change the above to the URL link and discriptions that you want.

The above code will create this dropdown:

DISPLAYED TITLE LINK ONE LINK TWO

Unfortunitly you can not change the standard gray color of the arrow or the outline color of the dropdown but you can change the background color by simply changing the color# in the background line of the .dropdown selector. You can find a list of HTML color codes here.