2

我有一个<li>带有 2px 边框底部的菜单项作为下划线和一个粗体悬停，它使其他元素在悬停时移动。我试图更改悬停时的填充但没有结果。（我认为问题是边框底部添加的下划线）

#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

使悬停时间的字体大小与悬停时间的正常时间相同 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;
}

这将按预期完美运行，但请记住，在 IE7 和以下版本中不支持 display:table。

于 2013-01-18T12:54:24.043 回答
0

只需为悬停提供以下CSS。您已更改粗体、边框底部和大小，这会导致对齐问题。否则，您必须为每个链接指定指定宽度。

#menu2 a:hover {
text-decoration:underline;
 }
于 2013-01-18T12:55:52.280 回答
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 回答