Skip to main content
se añadieron 152 caracteres en el cuerpo
Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16
<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>


/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}

/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}
<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>

<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>


/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}

/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}
<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>

Origen Enlace
Fst0
  • 23
  • 8

Resaltar menú horizontal

Estoy realizando un menú horizontal y quiero que el campo que se haga click se quede en otro color, estoy usando solo html y css. Hasta ahora solamente consigo que cambie de color si sitúo el cursor sobre el campo en cuestión, pero si lo quito, el marcado se pierde. No consigo dar con algún tutorial ni nada parecido que trate este tema, por lo que me sería de gran ayuda su colaboración.

Os adjunto el HTML y CSS

<div class="menuhorizontal">
  <ul>
    <li>
      <a href="index.html">Index</a>
    </li>
    <li>
      <a href="1.html">Quienes Somos</a>
    </li>
    <li>
      <a href="2.html">Nuestras Actvidades</a>
    </li>
    <li>
      <a href="">Contacto</a>
    </li>
  </ul>
</div>


/*Menú horizontal*/
  .menuhorizontal{
     width: 100%;
     margin: 0px auto;
     background-color: ;
     text-align: center;
  }

  .menuhorizontal ul {
    list-style-type: none;
    display: inline-block;
    background-color: white;
  }

  .menuhorizontal ul li {
    float: left;
    margin-top: 10px;
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 1px solid black;
 }

   li {
    font-size: 1.5em;
    padding: 2px;
    margin: 3px;
    border: 2px solid black;
    border-radius: 10px;
  }

 a {
 padding: 5px;
 font-family: "Times New Roman", Times;
 text-decoration: none;
 color: black;
}

 a:hover {
color: red;
}

 li:hover {
  background-color: none;
}

 a:active{
  font-weight: bold;
}

Se agradece cualquier tipo de ayuda