横ナビゲーション - web-0127のブログ

リストをナビゲーションに（横）

<body>
<ul class="nav">
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>

CSSの記述

borderを指定した場合

《例１》

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body */ 
body {
  background: #FFF;
  font-size: 16px;
}

/* .nav */ 
ul.nav {
  width: 800px;
  overflow: hidden;
  margin: 50px auto;
}
ul.nav li {
  float: left;
  width: 160px;
  line-height: 40px;
  text-align: center;
}
ul.nav li a {
  display: block;
  background: #FFFEF0;
  border: 2px solid #95A473;
  border-left: none;
  color: #6B8150;
}
ul.nav li:first-child a {
  border-left: 2px solid #95A473;
}
ul.nav li a:hover {
  background: #95A473;
  color: #FFF;
}

《例２》

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body */ 
body {
  background: #FFF;
  font-size: 16px;
}

/* .nav */ 
ul.nav {
  width: 800px;
  overflow: hidden;
  margin: 50px auto;
}
ul.nav li {
  float: left;
  width: 160px;
  line-height: 40px;
  text-align: center;
}
ul.nav li a {
  display: block;
  background: #4C6EAF;
  border-left: 2px solid #FFF;
  color: #FFF;
}
ul.nav li:first-child a {
  border-right: none;
}
ul.nav li a:hover {
  background: #95A473;
}