Skip to main content
tags editadas
Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
[Edição removida durante o período de tolerância]
Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244
adicionou 165 caracteres ao conteúdo
Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244

Código HTML:

    <ul class="navigation">
        <a href="#"><li>ITEM 1</li>
        </a>
        <a href="#">
            <li class="center">ITEM 2</li>
        </a>
        <a href="#">
            <li>ITEM 3</li>
        </a>
    </ul>

Código CSS

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > a > li {
  list-style-type: none;
  display: inline-block;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
  margin: 0;
  max-height: 30px;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li {
  color: #b5121b;
}
<ul class="navigation">
  <a href="#"><li>ITEM 1</li>
  </a>
  <a href="#">
    <li class="center">ITEM 2</li>
  </a>
  <a href="#">
    <li>ITEM 3</li>
  </a>
</ul>
ul.navigation {
    width: auto;
    height: 40px;
    position: relative;
    background-color: #fcfcfc;
    padding: 0;
    color: #b5121b;
    list-style-type: none;
    box-shadow: 0 3px #ececec;
    margin: 0;
    z-index: 1;
}
ul.navigation > a > li {
    list-style-type: none;
    display: inline-block;
    height: 40px !important;
    padding: 10px 20px 0px 20px;
    margin: 0;
    max-height: 30px;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
ul.navigation > a > li {
    color: #b5121b;
}
 

Código HTML:

    <ul class="navigation">
        <a href="#"><li>ITEM 1</li>
        </a>
        <a href="#">
            <li class="center">ITEM 2</li>
        </a>
        <a href="#">
            <li>ITEM 3</li>
        </a>
    </ul>

Código CSS

ul.navigation {
    width: auto;
    height: 40px;
    position: relative;
    background-color: #fcfcfc;
    padding: 0;
    color: #b5121b;
    list-style-type: none;
    box-shadow: 0 3px #ececec;
    margin: 0;
    z-index: 1;
}
ul.navigation > a > li {
    list-style-type: none;
    display: inline-block;
    height: 40px !important;
    padding: 10px 20px 0px 20px;
    margin: 0;
    max-height: 30px;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
ul.navigation > a > li {
    color: #b5121b;
}

ul.navigation {
  width: auto;
  height: 40px;
  position: relative;
  background-color: #fcfcfc;
  padding: 0;
  color: #b5121b;
  list-style-type: none;
  box-shadow: 0 3px #ececec;
  margin: 0;
  z-index: 1;
}
ul.navigation > a > li {
  list-style-type: none;
  display: inline-block;
  height: 40px !important;
  padding: 10px 20px 0px 20px;
  margin: 0;
  max-height: 30px;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
ul.navigation > a > li {
  color: #b5121b;
}
<ul class="navigation">
  <a href="#"><li>ITEM 1</li>
  </a>
  <a href="#">
    <li class="center">ITEM 2</li>
  </a>
  <a href="#">
    <li>ITEM 3</li>
  </a>
</ul>
 

Fonte Link
Carregando