Relative position is not cooperating with width!

[garyjohnson]

Hello, I have a few links that I have given a relative position. They have the widths set to 200px, however they do not follow this at all and only have the width wrap around text. When they had the position of float, they followed the width rule of 200px. I have no idea why they are not following the width rule, here is the CSS

ul a{
  background:rgba(0,0,0,.4);
  font-size: 15px;
  position:relative;
  height:50px;
  left:0px;
  color:#FFFFFF;
  width:200px;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  margin-left:-40px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}

Thanks for looking!

This is the HTML

<ul>
    <li><a href="#" id="toggle1" class="slide_links">Contact Us</a></li>
    <li><a href="contact.asp" id="toggle2" class="slide_links">Parts Inventory</a></li>
    <li><a href="about.asp" id="toggle3" class="slide_links">Boats For Sale</a></li>
    <li><a href="about.asp" id="toggle4" class="slide_links">Marine Services</a></li>
    </ul>

[nauticalmac]

Apply the width and positioning to a block level tag (e.g. li) instead of inline (a)
Without knowing what the other constraints of layout are (menu animation?), here's a place to start from.

ul li {
  background:rgba(0,0,0,.4);
  position:relative;
  height:50px;
  left:0px;
  width:200px;
  padding:2px;
  margin:0px;
  margin-left:-40px;
}
ul li a {
  font-size: 15px;
  color:#FFFFFF;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}