Customize drop down menu

[Connie4]

I have added a drop down menu to my existing menu. I am new to CSS but I was able to change the background color and font to match the old menu. The problem I am having is changing the border - either getting rid of it or changing the color to match the background.

The code is:

border: #ffffff 1px solid}

I have tried changing the color, the pixels and the style but nothing works. What do I need to do to change this?

[Triumph]

Post a link or show us the whole thing. :)

[Connie4]

I don't have it up on the site yet, but here is the CSS part -

.dropdown { COLOR: #FFFFFF;
leftmargin: 0PX; topmargin: 0px; marginwidth: 0px; marginheight: 0px;
WIDTH: 154PX;
background-color:#666666;
FONT-FAMILY: verdana, arial, helvetica, sans;
color: #FFFFFF;
font-size: 8pt;
height: 21px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 5px;
BORDER: #666666 1px solid;}

This is the JavaScript part -
document.write('</td></tr><tr><td><form action="#" method="post">');
document.write('<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">');
document.write('<option value="services.htm">Services</option>');
document.write('<option value="weddingpage.htm">Weddings</option>');
document.write(' </select>');
document.write(' </form>');

[NogDog]

Don't know if this is contributing to your problem, but these properties do not exist in CSS:

leftmargin: 0PX; topmargin: 0px; marginwidth: 0px; marginheight: 0px;

The valid margin elements are: "margin-top", "margin-right", "margin-bottom", and "margin-left". Or you can combine them into one margin description (starts at top and goes clockwise):

margin: 0 0 0 0;

Or, since they're all the same:

margin: 0;

[Triumph]

Don't be afraid to post the whole thing...everyone here is here to help. No one is going to steal your ideas (especially when they don't work). ;)

[Triumph]

Originally posted by NogDog
Don't know if this is contributing to your problem, but these properties do not exist in CSS... Perhaps the browser ignores anything after a mistake so you may have it. :)

[Connie4]

Ok, I changed it to margin: 0;
but that didn't change anything.

<Don't be afraid to post the whole thing...>

Do you want to see the whole CSS page? I thought the part about the drop down menu would be the important part.

[Triumph]

Originally posted by Connie4
I thought the part about the drop down menu would be the important part. Who's to say?

[Connie4]

I appreciate this help. I'll have to use two messages.

This is the .css page:
BODY {scrollbar-base-color: #666666;
scrollbar-track-color: #444444;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #F0F0F0;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #F0F0F0;
scrollbar-arrow-color: #FFFFFF; }



/* THE NEXT LINE CONTROLS THE FONT SIZE ON ALL PAGES */


TABLE { COLOR: #FFFFFF; FONT: 10px verdana, arial, sans-serif; font-weight: bold;}

.title { COLOR: #0099ff; FONT: 18px verdana, arial, sans-serif; letter-spacing: 2px; font-weight: bold }

a:link { color: #99ccff; text-decoration: none }

a:visited { color: #99ccff; text-decoration: none }

a:active { color: #0099ff; text-decoration: none }

a:hover { color: #cc0000; text-decoration: none }

a.sidebarlinks:link { color: #99ccFF; text-decoration: none }

a.sidebarlinks:visited { color: #99ccff; text-decoration: none }

a.sidebarlinks:active { color: #0099FF; text-decoration: none }

a.sidebarlinks:hover { color: #cc0000; text-decoration: none }


.just {text-align: justify;}

.copyright { COLOR: #FFFFFF; FONT: 12px arial, geneva, verdana, sans-serif }

.subtitle { COLOR: #FFFFFF; FONT: 13px verdana, arial, sans-serif; font-weight: bold }

.smalltitle { COLOR: #FFFFFF; FONT: 11px verdana, arial, sans-serif; font-weight: bold }

.services { COLOR: #999999; FONT: 12px verdana, arial, sans-serif; font-weight: bold }

.price { COLOR: #99FFCC; FONT: 11px geneva, verdana, arial, sans-serif; font-weight: bold }

.tracktext {padding-left: 4px; padding-right: 8px }

.borders { border: #666666 1px solid }

#wm-location { LEFT: 0px; POSITION: absolute; TOP: 0px; z-index:-1; }

#music-closebutton { POSITION: absolute; BOTTOM: 8px }

#menu { LEFT: 8px; WIDTH: 154px; POSITION: absolute; TOP: 90px }

#flashplayer { LEFT: 8px; POSITION: absolute; TOP: 8px }

#ZOOM { LEFT: 169px; POSITION: absolute; TOP: 290px }

.menu { background-image: url("picts/menu.gif");
background-color:#666666;
FONT-FAMILY: verdana, arial, helvetica, sans;
color: #FFFFFF;
font-size: 8pt;
height: 21px;
width: 154px;
cursor:hand;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 5px;
BORDER: #666666 1px solid;
}
.menuon { background-image: url("picts/menuon.gif");
background-color:#FFFFFF;
FONT-FAMILY: verdana, arial, helvetica, sans;
color: #000000;
font-size: 8pt;
height: 21px;
width: 154px;
cursor:hand;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 5px;
BORDER: #FFFFFF 0px solid }

.button-popups { background-image: url("picts/button.gif");
background-color:#F0F0F0;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #000000;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #999999 1px solid }

.buttonon-popups { background-image: url("picts/buttonon.gif");
background-color:#DBE2E7;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #336699;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #336699 1px solid }

.button-contact { background-image: url("picts/button.gif");
background-color:#F0F0F0;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #000000;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #999999 1px solid }

.buttonon-contact { background-image: url("picts/buttonon.gif");
background-color:#DBE2E7;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #336699;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #336699 1px solid }

.button-order { background-image: url("picts/button.gif");
background-color:#F0F0F0;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #000000;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #999999 1px solid }

.buttonon-order { background-image: url("picts/buttonon.gif");
background-color:#DBE2E7;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #336699;
font-size: 9pt;
height: 20px;
cursor:hand;
font-weight: normal;
text-align: center;
BORDER: #336699 1px solid }


.dropdown { COLOR: #FFFFFF;
margin: 0;
WIDTH: 154PX;
background-color:#666666;
FONT-FAMILY: verdana, arial, helvetica, sans;
color: #FFFFFF;
font-size: 8pt;
height: 21px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 9px;
padding-right: 5px;
BORDER: #FFFFFF 1px solid;}
}

.dropdown_title { COLOR: #FFFFFF;
background-color:#000000;}

.shadeform { FONT: 13px arial, verdana, sans-serif;
text-align: left;
WIDTH: 210PX;
background-color:#000000;
color:#FFFFFF;
BORDER: #FFFFFF 1px solid}

.textarea { FONT: 13px arial, verdana, sans-serif;
text-align: left;
WIDTH: 240PX;
background-color:#000000;
color:#FFFFFF;
BORDER: #FFFFFF 1px solid}

.searchform { FONT: 13px arial, verdana, sans-serif;
text-align: left;
WIDTH: 150PX;
background-color:#000000;
color:#FFFFFF;
BORDER: #FFFFFF 1px solid}



.searchdrop { FONT: 13px arial, verdana, sans-serif;
WIDTH: 70PX;
background-color:#666666;
color:#FFFFFF;
BORDER: #FFFFFF 1px solid}


.searchbutton {background-image: url("picts/button.gif");
background-color:#F0F0F0;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #000000;
font-size: 8pt;
height: 20px;
width: 35px;
cursor:hand;
font-weight: bold;
text-align: center;
BORDER: #000000 1px solid }
.top (background-image: url("picts/webphotos/bouquetwhite.jpg") ;
background-repeat: no-repeat;
background-position: right;}

#ticker { left: 8px; POSITION: relative; bottom: 10px;
font-family: invitation; arial }

I will add the menu page in the next message.

[Connie4]

I've uploaded the page with the menu on it: http://goentertainmentdjs.com/home.htm

This is the menu.js page:
<!-- Begin

// NOTE: If you use a ' add a slash before it like this \'

document.write('<DIV id="menu">');
document.write('<TABLE cellpadding=0 cellspacing=0 border=0 leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" width="75"><tr><td>');
document.write('<img src="picts/menu-top.gif" width="154" height="75"></a><br>');


document.write('</td></tr><tr><td onClick="location.href=\'us.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('About Us<br>');


document.write('</td></tr><tr><td onClick="location.href=\'sound-1.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Music Lists/Samples<br>');


document.write('</td></tr><tr><td onClick="location.href=\'cd.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Make A Payment/Purchase<br>');


document.write('</td></tr><tr><td onClick="location.href=\'service.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Services<br>');


document.write('</td></tr><tr><td onClick="location.href=\'gallery-1.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Photo Gallery<br>');


// COPY AND PASTE THE NEXT TWO LINES TOO ADD A NEW LINK

document.write('</td></tr><tr><td onClick="location.href=\'testimonials.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Testimonials<br>');


document.write('</td></tr><tr><td onClick="location.href=\'pricing.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Pricing<br>');


document.write('</td></tr><tr><td onClick="location.href=\'hiringadjpage.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('DJ Hiring Tips<br>');


document.write('</td></tr><tr><td onClick="location.href=\'faqpage.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('FAQs<br>');


document.write('</td></tr><tr><td onClick="location.href=\'links.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Links<br>');


document.write('</td></tr><tr><td onClick="location.href=\'contact.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Contact<br>');


document.write('</td></tr><tr><td onClick="location.href=\'home.htm\';" onmouseover="this.className=\'menuon\'" onmouseout="this.className=\'menu\'" class="menu">');
document.write('Home<br>');


document.write('</td></tr><tr><td><form action="#" method="post">');
document.write('<select name="choice" size="1" onChange="jump(this.form)" class="dropdown">');
document.write('<option value="services.htm">Services</option>');
document.write('<option value="weddingpage.htm">Weddings</option>');
document.write('<option value="services.htm">School Events</option>');
document.write('<option value="services.htm">Corporate Events</option>');
document.write('<option value="services.htm">LDS Dances</option>');
document.write('<option value="services.htm">Private Parties</option>');
document.write('<option value="services.htm">Market Nights</option>');
document.write(' </select>');
document.write(' </form>');

document.write('</td></tr><tr><td>');
document.write('<img src="picts/menu-bottom.jpg" width="154" height="150"></a><br>');


document.write('</td></tr></table></DIV>');


// End -->