Problem with spacing/positioning drop menus realtive to each other

[litebearer]

Hi...

 

I know enough to be dangerous and usually can fudge my way around problems; however, it would be great to do things properly. That said, I have a site where there are several drop down menus arranged vertically in a div. I fudged in order to reduce/control the margins arround the them. Am looking for suggestions for a better more elegant way to handle this.

 

here is the site:

 

http://www.wljol.com

 

and here is the code for the menu(s)

 

<a href="howto.php" >How To Submit Something</a><br>
<a href="index.php" >Home Page</a><br>
<a href="contact00.php" >Contact</a><br>
<a href="editorial00.php" >Editorials</a><br>
<a href="homeownerassoc00.php">Homeowner Associations</a><br>
<a href="display_004.php">Legal Notices</a><br>
<a href="letters00.php">Letters to Editor</a><br>
Links<br>
<a href="display_016.php" >Local Events</a><br>
Local Sports<br>

<div id=layer101 style="position:relative; top:0; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form1">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Announcements</font></OPTION>
<OPTION VALUE="display_017.php">Anniversaries</OPTION>
<OPTION VALUE="display_018.php">Birthdays</OPTION>
<OPTION VALUE="display_008.php">Births</OPTION>
<OPTION VALUE="display_009.php">Engagements</OPTION>
<OPTION VALUE="display_012.php">Garage Sales</OPTION>
<OPTION VALUE="display_003.php">Graduations</OPTION>
<OPTION VALUE="display_010.php">Obituaries</OPTION>
<OPTION VALUE="display_011.php">Weddings</SELECT>
</FORM> 
</div>

<div id=layer102 style="position:relative; top:-14; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form2">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Classifieds</font></OPTION>
<OPTION VALUE="">Antiques</OPTION>
<OPTION VALUE="">Appliances</OPTION>
<OPTION VALUE="display_001.php">Autos</OPTION>
<OPTION VALUE="display_002.php">Boats</OPTION>
<OPTION VALUE="">Computers</OPTION>
<OPTION VALUE="">Furniture</OPTION>
<OPTION VALUE="">Homes By Owner</OPTION>
<OPTION VALUE="">Homes By Realtorr</OPTION>
<OPTION VALUE="">Lawn & Garden</OPTION>
<OPTION VALUE="display_019.php">Motorcycles/ATVs</OPTION>
<OPTION VALUE="">Sporting Goods</SELECT>
</FORM>  
</div>

<div id=layer103 style="position:relative; top:-28; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form3">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Employment</font></OPTION>
<OPTION VALUE="">Help Wanted</OPTION>
<OPTION VALUE="">Position Wanted</SELECT>
</FORM>
</div>

<div id=layer104 style="position:relative; top:-42; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form4">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Entertainment</font></OPTION>
<OPTION VALUE="display_014.php">Book Reviews</OPTION>
<OPTION VALUE="display_013.php">Movie Reviews</OPTION>
<OPTION VALUE="display_015.php">Restaurant Reviews</SELECT>
</FORM> 
</div>

<div id=layer105 style="position:relative; top:-60; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form5">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>From Our Leaders</font></OPTION>
<OPTION VALUE="display_005.php">Mike Kowal's Desk</OPTION>
<OPTION VALUE="display_006.php">Fire Chief's Desk</OPTION>
<OPTION VALUE="display_007.php">Police Chief's Desk</SELECT>
</FORM>
</div>

<div id=layer106 style="position:relative; top:-78; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form6">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Recipes</font></OPTION>
<OPTION VALUE="">Entres</OPTION>
<OPTION VALUE="">Desserts</OPTION>
<OPTION VALUE="">Appetizers</SELECT>
</FORM>
</div>


<div id=layer107 style="position:relative; top:-96; left:0;">
<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form7">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Semi-regular Features</font></OPTION>
<OPTION VALUE="">Ask the Vet</OPTION>
<OPTION VALUE="">From The Pulpit</OPTION>
<OPTION VALUE="">Good Fido</OPTION>
<OPTION VALUE="">To Your Health</OPTION>
<OPTION VALUE="">More Than A Smile</SELECT>
</FORM>
</div>

<div id=layer108 style="position:relative; top:-114; left:0;">

<Script language="JavaScript">
<!-- Script courtesy of http://www.ausweb.com.au 
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</SCRIPT>
<FORM NAME="form8">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1" style="width: 40mm" style="margin: 0">
<OPTION VALUE=""><font color=#ff0000>Services</font></OPTION>
<OPTION VALUE="">Automotive Repair</OPTION>
<OPTION VALUE="">Carpentry</OPTION>
<OPTION VALUE="">Electrical</OPTION>
<OPTION VALUE="">Handy Man</OPTION>
<OPTION VALUE="">Heating & Cooling</OPTION>
<OPTION VALUE="">Plumbing / Septic</SELECT>
</FORM>
</div>

 

Ay help is greatly appreciated

 

Lite...

 

[TheFilmGod]

CSS:

 

#layer101 input {
margin: 10px 0 0 0;
}

[haku]

What is it that you are trying to do?