Can this navigation image be duplicated using CSS?

Basically trying to make a navigation that looks similar to the image:

Trying to do the following:

1. Have the dotted lines on the left and the bottom of all the text (I tried using the CSS dotted lines, but in IE the dotted lines were to big height wise...maybe i did it wrong though)

2. I want the orange arrow to only appear on hover over

3. I want the white text to turn red. A shade of red that looks readable over black.

I've been trying variations of CSS navs to see if i can find something else to compensate but it doesn't seem to look any better lol.

If anyone can provide any input, it would be greatly appreciated and thank you in advance.

1: What value did you use for the border? 1px?
2: if this is an list, you may have ul a defined. You will need to define the hover such as:

Code CSS:

---

.nav ul a:hover {
  background-image: url(path/to/img.jpg) no-repeat;
}

---

3.

Code css:

---

.nav ul:hover, .nav ul a:hover {
   color: red;
}

---

Thank you for your response.

I believe that was the border size i used. I mean in firefox it looked perfect, but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.

I was looking into doing this with CSS and lists, but im not really sure how i would go about creating the dotted lines for the left and bottom. I could use a background image, but in some parts of my navigation i plan to have a section further down but I need the left lines to be able to run down as needed.

Quote:

---

Originally Posted by 4SeeN

I believe that was the border size i used. I mean in firefox it looked perfect, but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.

---

This is the difference between the engines.

Quote:

---

Originally Posted by 4SeeN

I was looking into doing this with CSS and lists, but im not really sure how i would go about creating the dotted lines for the left and bottom. I could use a background image, but in some parts of my navigation i plan to have a section further down but I need the left lines to be able to run down as needed.

---

The lines are just simple dotted borders applied to the appropriate sides. So:

Code css:

---

ul li {
   border-left: 1px dotted #ccc;
   border-bottom: 1px dotted #ccc;
}

---

Quote:

---

but in internet explorer the dotted border looked more like a series of vertical lines instead of dots.

---

Ie6- doesn't do 1px dotted borders properly as it renders them as dashes. Its a well known and very old bug with no real fix.

You could simply use background images instead for more consistent results.

That nav is pretty simple and you would just use a background image repeated along the bottom of each anchor and dotted vertical border on each list parent.

There are plenty of list examples here to get your teeth into which should point you in the right direction.