Top menu couleur differentes

clem62

Membre régulier

Inscrit en: janvier 2010
Messages: 327
Localisation: Arras

[Problème] Top menu couleur differentes

05/05/2014, 11h13

bonjour

j'utilisais avant une extension mais j ai toujours pas eu le lien de téléchargement

pouvais vous m aider a faire un menu avec des item de différentes couleur j'ai vu une ébauche sur le forum

mes item sont les 468 469 470 471

merci

j'ai essayé ce code mes il manque quelques chose, je crois

ul.art-hmenu li.item-468 a:link, ul.art-hmenu li.item-469 a:visited
{
background: #B5B5B5;}

voici mon css

Code:

ul.art-hmenu>li
{
  margin-left: 9px;
}

ul.art-hmenu>li:first-child
{
  margin-left: 4px;
}

ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child
{
  margin-right: 4px;
}

ul.art-hmenu>li>a
{
  background: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid transparent;
  padding: 0 17px;
  margin: 0 auto;
  position: relative;
  display: block;
  height: 27px;
  cursor: pointer;
  text-decoration: none;
  color: #878787;
  line-height: 27px;
  text-align: center;
}

.art-hmenu>li>a, .art-hmenu>li>a:link, .art-hmenu>li>a:visited, .art-hmenu>li>a.active, .art-hmenu>li>a:hover
{
  font-size: 16px;
  font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
}

ul.art-hmenu>li>a.active
{
  background: #FD7A17;
  background: linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  background: -webkit-linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  background: -moz-linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  background: -o-linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  background: -ms-linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  background: linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  -svg-background: linear-gradient(top, #FD8F3A 0, #FC6F03 79%, #ED6802 100%) no-repeat;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #B5B5B5;
  padding: 0 17px;
  margin: 0 auto;
  color: #FFFFFF;
  text-decoration: none;
}

ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a
{
  text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
  background: #FD9D53;
  background: linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  background: -webkit-linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  background: -moz-linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  background: -o-linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  background: -ms-linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  background: linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  -svg-background: linear-gradient(top, #FEB47C 0, #FD8930 100%) no-repeat;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #FD9D53;
  padding: 0 17px;
  margin: 0 auto;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
  color: #FFFFFF;
  text-decoration: none;
}

ul.art-hmenu>li:before
{
  position: absolute;
  display: block;
  content: ' ';
  top: 0;
  left: -9px;
  width: 9px;
  height: 27px;
  background: url('../images/menuseparator.png') center center no-repeat;
}

ul.art-hmenu>li:first-child:before
{
  display: none;
}

ul.art-hmenu li li a
{
  background: #C7C7C7;
  background: transparent;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 0 22px;
  margin: 0 auto;
}

ul.art-hmenu li li
{
  float: none;
  width: auto;
  margin-top: 1px;
  margin-bottom: 1px;
}

.desktop ul.art-hmenu li li ul>li:first-child
{
  margin-top: 0;
}

ul.art-hmenu li li ul>li:last-child
{
  margin-bottom: 0;
}

.art-hmenu ul a
{
  display: block;
  white-space: nowrap;
  height: 23px;
  min-width: 7em;
  border: 0 solid transparent;
  text-align: left;
  line-height: 23px;
  color: #DBDBDB;
  font-size: 12px;
  font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  margin: 0;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a.active, .art-hmenu ul a:hover
{
  text-align: left;
  line-height: 23px;
  color: #DBDBDB;
  font-size: 12px;
  font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  margin: 0;
}



[B]ul.art-hmenu li.item-468 a:link, ul.art-hmenu li.item-469 a:visited
{
  background: #B5B5B5;}[/B]


ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
  background: #B5B5B5;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin: 0 auto;
}

.art-hmenu ul a:hover
{
  color: #5B2801;
}

.desktop .art-hmenu ul li:hover>a
{
  color: #5B2801;
}

ul.art-hmenu ul:before
{
  background: #0080F0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #299BFF;
  margin: 0 auto;
  display: block;
  position: absolute;
  content: ' ';
  z-index: 1;
}

.desktop ul.art-hmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.desktop ul.art-hmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

ul.art-hmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background-image: url('../images/spacer.gif');
}

.desktop ul.art-hmenu>li>ul
{
  padding: 16px 36px 36px 36px;
  margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul ul
{
  padding: 36px 36px 36px 18px;
  margin: -36px 0 0 -5px;
}

.desktop ul.art-hmenu ul.art-hmenu-left-to-right
{
  right: auto;
  left: 0;
  margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul.art-hmenu-right-to-left
{
  left: auto;
  right: 0;
  margin: -10px -30px 0 0;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right
{
  right: auto;
  left: 100%;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left
{
  left: auto;
  right: 100%;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right
{
  right: auto;
  left: 0;
  padding: 36px 36px 36px 18px;
  margin: -36px 0 0 -5px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left
{
  left: auto;
  right: 0;
  padding: 36px 18px 36px 36px;
  margin: -36px -5px 0 0;
}

.desktop ul.art-hmenu li ul>li:first-child
{
  margin-top: 0;
}

.desktop ul.art-hmenu li ul>li:last-child
{
  margin-bottom: 0;
}

.desktop ul.art-hmenu ul ul:before
{
  border-radius: 2px;
  top: 30px;
  bottom: 30px;
  right: 30px;
  left: 12px;
}

.desktop ul.art-hmenu>li>ul:before
{
  top: 10px;
  right: 30px;
  bottom: 30px;
  left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-left-to-right:before
{
  right: 30px;
  left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-right-to-left:before
{
  right: 30px;
  left: 30px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right:before
{
  right: 30px;
  left: 12px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left:before
{
  right: 12px;
  left: 30px;
}

Dépannage informatique Arras et solution web :http://www.clicinformatique62.fr
annuaire de référencement : http://www.trouvez-mon-site.com
Site web d'assistance informatique à distance : http://www.assistance-informatique-enligne.net

Tags: Aucun

Précédent template Suivant

[Problème] Top menu couleur differentes

Annonce

Partenaire de l'association