オンマウス時下線

Question

オンマウス時に下線が入るようにしたのですが、横１００％で表示されません。
どうすればいいですか？

<li class="item alt1"> 
    <a href="../index.html" target="_top" >ホーム </a>
</li>
<li class="item alt1"> 
    <a href="#" target="_top" > ブログ </a>
</li>

/* オンマウス時下線追加 */
/* 通常時（マウスカーソルがのっていない時）のデザイン */
.item{
	border-bottom: none;    /* 装飾なし */
}

/* オンマウス（hover）時 */
.item:hover{
	border-bottom-width:2px;
	border-bottom-color:#F00;
	border-bottom-style: solid;
}

全CSSです。

body{
	background: #FFF;
	margin:0;
}

.nav{
	/* 上部の隙間調節 */
	margin-top:23px;
}
ol,ul{
	/* 文字の前に付く点をなくす */
    list-style:none ;
}
a{
	/* 下線を消す */
	text-decoration:none;
}
li{
	/* 周りの空間を調節 */
	margin:5px;
}
.item{
	
	/* 文字をセンタリングする */
	text-align:center
}
.wap{
	position: relative;
  	overflow: hidden;
}
.wap ul {
  position: relative;
  left: 50%;
  float: left;
}
.wap ul li {
  position: relative;
  left: -50%;
  float: left;
}


.alt1{
	border-right-width:1px;
	border-right-color:#A49D9D;
	border-right-style: solid;
}



/* オンマウス時下線追加 */
/* 通常時（マウスカーソルがのっていない時）のデザイン */
.item{
	border-bottom: none;    /* 装飾なし */
}

/* オンマウス（hover）時 */
.item:hover{
	border-bottom-width:3px;
	border-bottom-color:#F00;
	border-bottom-style: solid;
}

Answer 1

ここまでの流れからすると、li.itemはdisplay:inline-block;になってますよね？
だとしたら、

<li class="item alt1">
    <a href="../index.html" target="_top" >ホーム </a>
</li><!--
--><li class="item alt1"> 
    <a href="#" target="_top" > ブログ </a>
</li>

このように、</li>と<li>の間にコメントを挟んでみてください。
（display:inline-block;で横並びにした場合、ソースコード上の改行文字が半角スペースになって画面に現れてしまうので、それがli同士の間のちょっとしたすき間になってしまうのです。）

もし、li.itemをdisplay:inline-block;にしていないのにすき間が空くのでしたら、
別のところに原因があると思うので、そのリストのCSSを省略せずに全部掲載してみてください。

Comments

[ryo-dev]

CSSを全部記載します。

[aKusano]

li{
/* 周りの空間を調節 */
margin:5px;
}

これじゃないですか？ margin:5px;は上下左右に5pxの余白を作ります。
左右隣り合ったliのそれぞれにmargin:5px;がついているので、
liとliの間には10pxの余白が設定されていることになります。
当然、オンマウス時の下線は途切れた形になりますよね？
なのでliから左右のmarginを取れば良いかと。

[ryo-dev]

そうでした。ありがとうございました。

Answer 2

見たところ<li class="item alt1">ブロック間に隙間ができてしまってるのが問題かと思います。

<li class="item alt1">の横並びにする方法はどんな手段を使っていますか？ display:inline-blockで並べる際、改行コードが半角スペースとして扱われてしまうため 隙間ができてしまう事があります。

■CSSで隙間を無くす方法
※liタグにletter-spacing: -.40em;を指定
li内のaタグにletter-spacing: nomal;で行間をもとに戻す。

■float:leftで横並びさせる方法
※子要素がfloatすると親要素が内部の高さを取れなくなるので、親要素へのclearfix処理が必要です。