CSS borders not appearing

Question

I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:

To create the colors, they're using a simple bottom and left border in CSS.

I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.

I'm using the following CSS:

.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;
}

The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.

My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!

Answer 1

Although you set the width and color, you can not leave out the style parameter with borders.

To get the desired effect as you presented in the image - jsFiddle demo

• dark background color for the <ul>
• a wide border-left on the <li>
• a margin-bottom: 2px as bottom border - shows ul background
• and a few small tweaks like text-indent etc

---

Some information regarding borders

CSS borders consist of 3 parameters

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

You can set one value, which applies to all sides

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

Or with short hand border: 5px solid red; and also applies to all sides.

---

You can style each border side individually, as you are doing above.

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

Example:

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

Which can be accomplished also with shorthand: border-left: 5px solid white;

---

For more information and other border opportunities

• https://developer.mozilla.org/en-US/docs/Web/CSS/border
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-style