PC用グローバルナビゲーション

PC用グローバルナビゲーション　ver1　Global Navigation forPC ver1

HTML

<div class="gnav">
<ul id="g-nav" class="clear">
<li><a href="/" class="on">ホーム</a></li>
<li class="li-long"><a href="/aaa.html">aaa<a></li>
<li><a href="/bbb.html">bbb</a><li>
<li><a href="/ccc.html">ccc</a><li>
<li><a href="/ddd.html">ddd</a><li>
</ul>
</div><!-- /.gnav -->

CSS

#g-nav {
  width: 1020px;
  height: 60px;
  list-style-type: none;
  }
  
#g-nav li {
  width: 16%;　/*文字数によりwidthの％を設定*/
  height: 60px;
  float: left;
  text-align: center;
  }

#g-nav .li-long {
  width: 20%; /*文字数が多いときに使用*/
  }

#g-nav li a {
  width: auto;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: bold;
  display: block;
  text-decoration: none;
  background: #93afcc;
  color: #fff;
  }

#g-nav li a:hover {
  color: #478acb;
  border-bottom: 5px solid #478acb;
  }