Menu does not change the width

Question

Menu does not change the width

Navigation

#1 by (1 votes)

0

I am making a menu vertical and putting the black color as background. What I'm going through is that I want to leave a fixed width of 200px for each menu line, except that 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;
}

html css twitter-bootstrap menu

asked by anonymous 21.07.2015 / 04:20

1 answer

Making fadeIn in fixed scroll menu div with jquery Connection between 3 tables to retrieve information, sql

score 1 · Accepted Answer

You are treating background within the a element. Do it this 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 customize the links specifically, then you create a call in the css for them by means of a :

ul li a{
    color: red;
}