How to make a bulleted list (menu) with dotted lines

Question

I'm trying to make a bullet list / menu with dotted lines in-between each anchor tag.

On the rollover, the background turns pink and there should be an adequate amount of spacing between it and the dotted line:

This looks okay, but when I switch to a mobile layout, the positioning of the dotted lines are totally off.

Here is my CSS:

li {
    background: url('images/dotted-line.png') repeat-x 0px 41px;
    height: 55px;
    padding: 0;
}

a:link, a:visited {
    display: block;
    color: @darkpink;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 8px 8px 8px;
    margin-top: -9px;
    text-transform: uppercase;
    width: 195px; /* 188 */
    cursor: pointer;
    .textshadow(); /* less minim */
}

a:hover, a.selected {
    border-radius: @radius;
    background-color: @darkpink;
    .textshadowdark();
    cursor: pointer;
    color: #FFF;
}

I am just wondering if it's a good/bad idea to put the background dotted line on the li tag. Is it better to just reposition the image in a media query, or to put the image on the anchor tag instead?

Answer 1

Yeah I agree with Sven, use something like this:

li {
    border-bottom:1px dashed #ce1443;
    height: 55px;
    padding: 0;
}

I went with dashed because dotted can be a bit much, and your screenshot above looks more like a dashed. I just grabbed a quick screengrab for the color.

Also... Are you trying to make this mobile only? Or is it supposed to be responsive? Might want to switch over to some em sizes so it'd be more relative to the screen size.