CSS frontières ne figurant pas

Je suis d'essayer à mon style de menu de navigation de la conception afin de refléter l'un sur timeanddate.com, comme le montre cette image:

CSS frontières ne figurant pas

À créer les couleurs, ils sont à l'aide d'un simple bas et à gauche de la frontière dans le CSS.

Que j'essaie d'ajouter une bordure à mon <li> tags sur mon site web de bac à sable, http://www.escapetech.com:8080.

Je suis en utilisant le code CSS suivant:

.anylinkcss li {
  list-style-type: none;
}

.participate li {
  list-style-type: square;
  border-left-color: #fa514d;
}

#navigation_bar {
  height: 31px;
  list-style: none;
  width: 1000px;
  margin-top: 15px;
}

#navigation_bar li {
  float: left;
  padding-right: 35px;
  padding-left: 10px;
  margin: auto 0px;
  vertical-align: middle;
}

#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
  position: absolute;
  line-height: 18px;
  z-index: 20;
  background-color: #000;
  text-align:left;
  visibility: hidden;
  left:  421px;
  top:207px;
  padding: 7px;
  padding-left: 25px;
}

La #anylinkcss3 et représenter des styles pour les menus déroulants, tandis que le #navigation_bar styles sont pour l'ensemble de la barre. Peu importe où je ajouter une bordure de styles, aucune ne semble, même après que j'commentaire de tous les codes CSS et il suffit d'inclure une bordure sur ces Id et des classes.

Mon menu actuel est en direct sur le lien que j'ai posté ci-dessus, je serais très reconnaissant si quelqu'un pouvait jeter un oeil et laissez-moi savoir pourquoi il peut y avoir des problèmes avec les frontières apparaissent. C'est ma première Pile d'Échange de post, donc j'espère que cela a été correctement formaté!

Avez-vous des border-style a déclaré n'importe où? c'est un attribut obligatoire et toutes les propriétés de bordure sera ignoré sans elle. Je ne vois nulle part dans votre code

OriginalL'auteur Nick SJSU | 2014-09-02

  1. 7

    Même si vous définissez la largeur et la couleur, vous ne pouvez pas quitter le paramètre de style avec des frontières.

    Pour obtenir l'effet désiré que vous avez présenté dans l'image - jsFiddle démo

    • sombre couleur d'arrière-plan pour le <ul>
    • une large frontière-gauche sur la <li>
    • un margin-bottom: 2px comme bordure du bas - montre ul fond
    • et quelques petites modifications comme texte-tiret etc

    Quelques informations concernant les frontières

    CSS frontières se composent de 3 paramètres

    • border-width
    • border-style
    • border-color

    Vous pouvez définir une valeur, qui s'applique à tous les côtés

    border-width: 5px;
border-style: solid;
border-color: red;

    Ou à la main à court border: 5px solid red; et s'applique également à tous les côtés.

    Vous pouvez définir le style de chaque côté de la frontière individuellement, comme vous le faites ci-dessus.

    • frontière côté-largeur
    • frontière côté style
    • frontière côté-couleur

    Exemple:

    border-left-width: 5px;
border-left-style: solid; 
border-left-color: white;

    Qui peut être réalisée aussi avec abrégée: border-left: 5px solid white;

    Pour plus d'informations et d'autres de la frontière des possibilités

    Merci ya monsieur, merci pour tout, bonne pour aider les débutants.

    OriginalL'auteur Brian Dillingham

  2. 1

    ahhh... Cerveau vous me battre pour elle.
    J'ai inséré border-style, et puis il y a "FRONTIÈRE"

    border: 5px solid white;

    OriginalL'auteur aahhaa

  3. 1

    En fait le truc dans son cas, c'est que la frontière est appliqué à l'ancre balises ne les listes! Cheers! 🙂 Et oui, si vous appliquez la frontière de la couleur comme d'une propriété, vous devez également appliquer une bordure de style border-width 🙂

    Voulez-vous exemple de travail sur jsfiddle?

    OriginalL'auteur Cowwando