2

下線が 2px の境界線の下にある<li>メニュー項目と、ホバリング中に他の要素を移動させる太字のホバーがあります。ホバーのパディングを変更しようとしましたが、結果はありませんでした。（問題はボーダー下部の下線が追加されていることだと思います）

#menu { 
     list-style: none outside none;
     margin-top:40px; 
     text-align: center}

#menu li { 
     margin-right: 26px;
     display:inline;}

#menu a:hover {
     border-bottom:2px solid #ac9962;
     font-size:16px;
     letter-spacing: -2px;
     white-space: nowrap;
     font-weight:bold;}

<ul id="menu">
        <li><a href="www.youtube.com">Menu1</a></li>
        <li><a href="www.youtube.com">Menu2</a></li>
        <li><a href="www.youtube.com">Menu3</a></li>
        <li><a href="www.youtube.com">Menu4</a></li>
      </ul>

http://jsfiddle.net/tGcfh/

4

4 に答える 4

0

ホバー用に次の css を指定するだけです。太字、境界線、サイズの変更を指定したため、配置の問題が発生します。それ以外の場合は、各リンクに指定された幅を与える必要があります。

#menu2 a:hover {
text-decoration:underline;
 }
于 2013-01-18T12:55:52.280 に答える
0

ホバー時のフォントサイズとホバー時の通常時のフォントサイズを同じにします font-size:16px があり、通常時の font-size:14px があります...そしてホバー時のフォントの太さの太字があります。

于 2013-01-18T12:53:24.197 に答える
0

同様のことを試してください：

HTML

<div id="menu_container">
  <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
  </ul>
</div>

CSS

#menu_container {
  width: 100%;
  display: table;
}

#menu_container ul li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 50px;
}

#menu_container ul li a {
  font-size: 14px;
}

#menu_container ul li a:hover {
  font-size: 24px;
}

これは期待どおりに完全に機能しますが、display:table は IE7 以降ではサポートされていないことに注意してください。

于 2013-01-18T12:54:24.043 に答える
0

これを変更する場合

#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}

消去

font-size:16px;
letter-spacing: -2px;
font-weight:bold;

これで問題が解決する場合があります

于 2013-01-22T08:11:48.593 に答える