html、cssでリストを表のように表示したい。

Question

web制作初心者です。
メニューなどを表示するリストを、枠線と罫線を使用し、表のように表示したいです。
完成図としては、枠・罫線ありのリストで、メニュー(リンク)に触れると背景色変更という風にしたいです。
最初は、<ul>要素にborderで枠をつけて、<li>要素にborder-bottom:で下線をつけるという風にしてました(最後の<li>は:last-childで線を消す)。
色々試してみても微妙にズレ(リンクの背景色が枠線からはみ出したり、罫線が枠線からはみ出る)が生じてしまい、うまく出来ませんでした。どなたか、良い方法がありましたら教えてください。
日々勉強しながら作っています。おかしい記述なども指摘いただければ幸いです。よろしくお願いいたします。

1/12追記
先ほど試した方法(<li>にborderをつける)でcssを編集いたしました。
罫線が重なり、触れたときの背景にもズレが生じてます。
先に申し上げました方法とは違ってますが、修正して直せましたらこの方法でいきたいと思ってます。よろしくお願いします。

1/13追記
CSS下部タグの追加、現在の状態のスクショを載せました。
引き続きよろしくお願いいたします。

●HTML●

<!--サイドバー-->
  <div id="sidebar">
    <ul class="sidebar-list">
      <li><a href="#infomation">infomation</a></li>
      <li><a href="#template">template</a></li>
      <li><a href="#material">material</a></li>
      <li><a href="#bookmark">bookmark</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
    <p>サンプルサンプルサンプル</p>
    <p>サンプル２サンプル２サンプル２</p>
  </div>
<!--サイドバーここまで-->

●CSS●

body {
  font-size: 80%;
  color: rgb(120,120,100);
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ＭＳ ゴシック', sans-serif;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgb(63,63,53);
}

a:hover {
  background-color: rgb(215,215,207);
}

p {
  margin:0;
}

/*ここからサイドバー*/
#sidebar {
  float: right;
  width: 210px;
}
.sidebar-list {
  padding: 0;
  margin: 0;
}
.sidebar-list li {
  list-style: none;
  width: 210px;
  border: dotted 1px rgb(215,215,207);
}
.sidebar-list a {
  display: inline-block;
  padding: 10px;
  margin: 0;
  width: 190px;
  text-align: center;
}
.sidebar-list li + li{
  border-top: none;
}
/*ここまでサイドバー*/

Comments

[kei344]

borderの指定が見当たらないなど、現状のCSSでは問題が再現できません。書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[CODEISLE]

どのように「メニューに触れると背景色変更」の挙動をさせているのかコードを提示していただけますか。

[defghi1977]

ご提示の画像・CSSでは極めて色を判読しにくいです. 検証コード内の色をredやblue等の判りやすいものに変えて下さい. また, border-styleがdottedによる「見せかけの隙間」による影響を排除するため, solidに変更してその挙動を試して下さい.

Answer 1

とりあえず、罫線の重なりを消す方法だけ。2番目以降のliのborder-topを無しにすればOKです。
cssに下記を追加します。

.sidebar-list li + li{
  border-top: none;
}

Comments

[aazzkk]

ありがとうございます。罫線はうまく表示できました。
触れたら変わる背景だけ、まだ少しズレ(微妙な空白)ができてしまいます。
スクショを追加・CSSのbody部分を追加いたしましたので、引き続きよろしくお願いいたします。

[CODEISLE]

違ったらすみません。
スクショを見て思ったのですが、もしかして拡大表示してますか？　ブラウザのズーム機能とかで。

[aazzkk]

返信ありがとうございます。
まさにその通りでした。お恥ずかしい限りです。
全く気が付きませんでした。
100%に戻しましたら綺麗に表示できました。
色々ありがとうございました。

Answer 2

box-sizingを使うと大体解決できます。box-sizingで調べてみてください。
あとは邪道かもしれませんがulにbackgroundで背景色を付けて要素をmarginで離して
枠線っぽく見せることもできます。marginも前後左右で重なってくれますからね。

jsfiddle

追記
空白を確認できません。原因は他にあると思います。
ソースそのままで実行した場合

Comments

[aazzkk]

解決策をありがとうございます。
box-sizingで調べてみて、試してみましたがやはり微妙にズレてしまいました(罫線がはみ出たり、背景色に1pxほどの小さな余白ができる)。
box-sizingを使用する方法ではありませんが、本文の修正をいたしましたのでよければまたご覧いただけますでしょか。よろしくお願いいたします。

[sousuke]

基本的にborderは重なりません。縦に並んだ要素の上下に引いた場合は
「上の要素の下枠線」と「下の要素の上枠線」が必ずかち合ってしまいます。
逆にいえばそれさえなんとかすればいいということです。
「罫線がはみ出る」や「背景に１ｐｘ～」は実際にコードを見ていない
こちら側ではどうなっているかも不明ですしどうすることもできません。

[aazzkk]

言葉足らずで申し訳ありません。
cssの追加と、現在のスクショを貼りましたので、お手数ですがご確認ください。
引き続きよろしくお願いいたします。