dotted lines are not showing up in CSS...! - css

Question

I am just working on a site.Here got completed everything..but almost..one thing not getting..so thought you people might help me...
Here it is please :
Here i am trying to make the dotted lines just right below the links Like this :
http://oi62.tinypic.com/2f07uy8.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: none !important;
border-bottom: 1px dotted #000;
padding: 0;
display: inline-block;
}
but it's not showing up right..Here is the current image:
http://oi60.tinypic.com/es5jrq.jpg
Here is the above image given CSS code please :
.navigation li ul li a {
color: #000;
background: #e4e4e4;
height: 0;
border-bottom: 1px dotted #000;
padding: 0px;
display: inline-block;
}

Answer 1

You can use after class to draw a dotted line below the links and you can use letter spacing to space out the dots the way you like it.
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}
.navigation li ul li a:after {
content: "...............................";
color: #000;
bottom: 5px;
left: 0;
}
Adjust the bottom value on the :after pasedo-class to suit your needs. Sometimes you wouldnt be able to see the line drawn by the :after pseudo class, so undo the Overflow hidden to figure out where the dotted line is.
===========================================================================================
fixes:
.navigation li ul li {
background: none;
padding: 12px 12px 6px;
float: none;
display: block;
}
.navigation li ul li a {
color: #000;
background: none !important;
padding: 0;
display: inline-block;
position: relative;
box-shadow: none;
overflow: hidden;
padding-bottom: 10px;
}
.navigation li ul li a:after {
content: "..................................................";
color: #000;
position: absolute;
bottom: 3px;
left: 0;
letter-spacing: 2px;
}
The white line was a box shadow. You need to optimize your site, it takes ages to load.

Answer 2

You need to give the <a>'s a fixed height, as opposed to 0. Using 22px seems to work fine.

Answer 3

I looked at both of the sites and after checking the incorrect one I came to some conclusions.
a. you have way too much styling. It's just cluttering up your code. The key word here is simplifying.
b. don't use font, it has become somewhat obsolete in the last years.
c. the white line above is because you're using box-shadow with offset of 1px (in foundation.css line 478). Do you need this attribute? if not, maybe you should remove it.
d. can't find any border-bottom style anywhere in the element.