HTML/CSS Drop Down Menu Bar

Hi,

I am creating my first drop down horizontal menu bar using html and css. The menu bar is located at www.devoteddomains.com.

I have two questions:

1. I am having difficulty with the thin white lines that appear to the left of each menu bar element, how can I get rid of these? Also what would be the best way to implement proper dividers between each menu element?

2. I want to have a different background on the the menu element if I am in that section of the website, how would I go about implementing this?

This is the CSS for the menu bar:

body{ behavior:url("csshover2.htc"); }
.new-menu-shell {
float: left;
height: 70px;
width: 960px;
}
.main-menu-section {
float: left;
width: 924px;
height: 40px;
margin-right: auto;
margin-left: auto;
background-image: url(web-design-services-images/main-menu-bg.jpg);
}
.new-menu-leftcorner {
background-image: url(web-design-services-images/menu-left-corner.jpg);
float: left;
height: 40px;
width: 18px;
}
.new-menu-rightcorner {
height: 40px;
width: 18px;
background-image: url(web-design-services-images/menu-right-corner.jpg);
float: left;
}



.pd_menu_01 {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
border:0px none #004080;
clear:both;
width: 924px;
} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:14px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
background-image: url(web-design-services-images/main-menu-bg.jpg);
background-repeat: repeat-x;
}
.pd_menu_01 ul {
list-style-type:none;
padding:0;
margin:0;
}
.pd_menu_01 ul li {
float:left;
z-index:auto;
border: 0px none #000000;
position: relative;
}
.pd_menu_01 ul li a {
color: #FFCC00;
float:none!important;
float:left;
display:block;
height:40px;
line-height:40px;
text-decoration:none;
padding-top: 0;
padding-right: 14px;
padding-bottom: 0;
padding-left: 14px;
background-color: #FFFFFF;
}
.pd_menu_01 ul li ul {
display:none;
border:none;
color: #000000;
background: #000000;
width: 1px;
}
.pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#FFCC00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:39px;
margin-top:1px;
left:0;
}
.pd_menu_01 ul li:hover ul li a {
display:block;
width:16em;
height:auto;
line-height:1.3em;
color:#000000;
background-image: url(web-design-services-images/menu-drop-down-bg.jpg);
font-size: 11px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
top: 20px;
} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#FFFFFF; text-decoration:none;color:#FFCC00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {text-decoration:none;color:#FFCC00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#FFFFFF; color:#000000;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
color:#000000;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #004080;
border-left-color: #004080;
}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

Thanks in advance,
Peter

The nesting of tags in your drop down is not correct. Take a look at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see the proper nesting.
<link href="web-design-services.css" rel="stylesheet" type="text/css" />
Also you've linked the same style sheet multiple times and they are not inside <head> of your page. (See http://validator.w3.org/check?uri=http://www.devoteddomains.com/)

Fixing the above may help you to fix your original issue.

Thank you for your help, I have corrected the validation issues and have corrected the issue with nesting(I think?).

Unfortunately this has not got rid of the white borders, any other suggestions?

and have corrected the issue with nesting(I think?). Not really! The easy and best way to nest list elements is like
<ul>
<li><a href="http://www.devoteddomains.com">HOME</a></li>
<li><a href="http://www.devoteddomains.com/website-design-packages.asp">WEBSITE DESIGN</a>
<ul>
<li>........</li>
<li>........</li>
</ul>
</li>
.........
</ul>
Also remove the repeated links to the same style sheet, which makes debugging a little difficult.

Sorry I forgot to upload the new page!

The page now validates with the additional references to the CSS file removed (they were in inlclude files).

I have arranged the list as you describe above, unfortunately I still have the white border.

Ah.. that border is there in your background image (http://www.devoteddomains.com/web-design-services-images/main-menu-bg.jpg) itself.

Thanks, can't believe I didn't notice that!

What is the best way to put dividers between each of the menu elements?