ナビ：下線がマウスに追随滋賀県守山市のホームページ制作

★ナビ：下線がマウスに追随
※ class=”current” を設定
ここがバー表示
HTML

			<nav id="globalNav">
				<div id="nav" class="clearfix"><span></span>
					<ul>
						<li class="current">ホーム</li>
						<li><a href="#">会社案内</a></li>
						<li><a href="#">事業案内</a></li>
						<li><a href="#">導入事例</a></li>
						<li><a href="#">採用情報</a></li>
						<li><a href="#">お知らせ</a></li>
						<li><a href="#">お問い合わせ</a></li>
					</ul>
				</div>
			</nav>
			<!-- /ID globalNav -->

CSS

#nav { position: relative; }
#nav a {text-decoration:none; }
#nav span {
    background: #1D7000;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
	 bottom: 0;
}

#globalNav {
	display: block;
	margin: 0;
	padding: 0;
	height: 67px;
	clear: both;
}

#globalNav ul {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
}

#globalNav li {
	display: inline;
}

#globalNav li.current {
	display: block;
	margin: 0;
	padding: 30px 0;
	width: 14%;
	float: left;
	text-align: center;
	list-style: none;
	background: #DFD;
	border-right: 2px solid #FFF;
	color: #063;
	letter-spacing: 0.1em;
}

#globalNav li a {
	display: block;
	margin: 0;
	padding: 30px 0;
	width: 14%;
	float: left;
	text-align: center;
	list-style: none;
	background: #EEE;
	border-right: 2px solid #FFF;
	color: #333;
	letter-spacing: 0.1em;
}

JS

<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(function() {
    // 初期位置へ移動
    $('#nav span').css({
        width: $('#nav .current').outerWidth(),
        left: $('#nav .current').position().left
    });
    // マウスオーバーでアニメーション
    $('#nav a').mouseover(function(){
        $('#nav span').stop().animate({
            width: $(this).outerWidth(),
            left: $(this).position().left}
        ,'fast');
    });
    // マウスアウトでもどる
    $('#nav a').mouseout(function(){
        $('#nav span').stop().animate({
            width: $('#nav .current').outerWidth(),
            left: $('#nav .current').position().left});
    });
});
</script>

サンプル