当光标悬停在下拉菜单按钮上时，文本变为粗体？答案

【问题标题】：Text become bold when the cursor hovers a drop-down menu button?当光标悬停在下拉菜单按钮上时，文本变为粗体？
【发布时间】：2014-01-19 23:13:23
【问题描述】：

当我将光标移动到 nav> 中列表的不同元素上时，所有内容都会变粗..
来源：http://htv2.tumblr.com
视频：http://quick.as/9gdcozz

   nav {width:100%;height:70px;position:fixed;top:0;left:0;background:#0c1d37;z-index:999;}
    .title {margin:5px 50px;color:#fff;float:left;}
    .title h1 {font-family: 'Lobster', cursive;font-size:2em;line-height:1.4em;font-weight:normal;font-style:normal;padding-right:15px;}
    .title h2 {font-family: 'Open Sans Condensed', sans-serif;font-size:1.0em;font-weight:300;font-style:italic;margin-top:-32px;line-height:1.8em;}
    .menunav {font-family: 'Open Sans', sans-serif;font-size:0.9em;line-height:0.9em;font-weight:300;font-style:italic;text-transform:uppercase;position:relative;}
    .menunav ul {list-style-type:none;margin:0;padding:0;}
    .menunav ul li {display:inline-block;width:100px;height:70px;text-align:center;line-height:70px;cursor:pointer;}
    .menunav ul li:hover {background: rgba(255, 255, 255, 0.1);}
    .menunav a {font-weight:300;color:#fff;}
    .menunav ul li div.showmenav {display:none;}
    .menunav ul li.contacts:hover > div.showmenav {display:list-item;position:absolute;}
    .showmenav {background:#0c1d37;width:100px;overflow:visible;}
    ul.dropdown li {display:list-item;text-align:center;}
    div.menunav a:hover {text-decoration:none;}

<body>
<nav><div class="wrapmobile"><div class="title"><h1>{Title}</h1><br/>{block:Description}<h2>{Description}</h2>{/block:Description}</div></div>
<div class="menunav">
    <ul>
        <a href="/"><li class="home">Home</li></a>
        <a href="/me"><li class="about">About</li></a>
        <li class="contacts">Contacts
            <div class="showmenav">
                <ul class="dropdown">
                    <a href="http://twitter.com/"><li>Twitter</li></a>
                    <a href="/ask"><li>Ask</li></a>
                    <a href="/"><li>Skype</li></a>
                </ul>
            </div>    
        </li>
        <li class="search"><a href="/archive">History</a></li>
    </ul>
</div>
</nav>
</body>

【问题讨论】：

请注意 - 您的 HTML 无效。您需要切换 <li> 和 <a> 标签的嵌套。应该是<li><a href="...">Twitter</a></li>
我想扩展按钮上的链接区域，似乎可以工作..有什么建议吗..？
仍然可以使用正确的 HTML 代码来扩展链接区域。将鼠标悬停在您提供的链接上时，我看不到您的字体变粗。
这里：quick.as/9gdcozz

标签： html css drop-down-menu mouseover

【解决方案1】：

将您的锚标记放在列表项中，并尝试将 300 的字体粗细添加到锚标记的悬停伪元素。看起来您的锚标记的字体粗细设置为小于浏览器的默认值 400，但悬停状态仍在呈现浏览器默认值。

.menunav a:hover {font-weight:300;}

编辑：以上没有解决问题。但是，导航的固定定位似乎是introduce a bug。添加“-webkit-font-smoothing: antialiased;”到 body 或 html 标签将创建字体一致性。

【讨论】：

不，它不起作用 :( 列表中的悬停按钮会影响
中的所有内容。它不应该发生！（我使用 OS X 10.9.1 - Safari 7.0.1 )
将导航的定位设置为固定似乎是introduce a bug。虽然不是完美的修复，但您可以添加“-webkit-font-smoothing: antialiased;”到 body 或 html 标签以保持字体一致性。