Menu does not change width

Question

I’m making a menu vertical and putting the color black as background. What I’m going through is I want to leave a fixed width of a 200px for each line of the menu, only it does not change. It leaves the size according to the size of the text.

HTML code:

<div class="col-md-3">

      <img src="" border="0" class="img-responsive">

      <nav>
        <ul>
            <li><a href="">A empresa</a></li>
            <li><a href="">Nossos serviços</a></li>
            <li><a href="">Nossos produtos</a></li>
            <li><a href="">Vídeos & Downloads</a></li>
            <li><a href="">Fale conosco</a></li>
        </ul>
      </nav>

CSS:

ul{
  list-style: none;
  width: 100%;
}

ul li{
  display: block;
  margin-top:25px;
  float:none;
}

ul li a{
  background:#000;
  padding:10px;
  width: 200px;
}

Answer 1

Are you treating the background within the element a. Do it that way:

ul{
    list-style: none;
    width: 100%;
}

ul li{
    background:#000;
    display: block;
    margin-top:25px;
    float:none;
    padding:10px;
    width: 200px;
}

If you want to specifically customize the links, then you create a css call for them via the elemeno a:

ul li a{
    color: red;
}