html - 当光标悬停在下拉菜单按钮上时,文本会变成粗体?

标签 html css drop-down-menu mouseover

当我将光标移动到 <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>

最佳答案

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

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

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

关于html - 当光标悬停在下拉菜单按钮上时,文本会变成粗体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21223937/

相关文章:

html - 如何在垂直滚动中隐藏 addThis 插件

jquery - 使用 cookie 时不保存更改

javascript - 如何保持一个div的右边缘与另一个div的右边缘相同

css - Bootstrap 下拉菜单不起作用

asp.net - 如何获取asp.net下拉列表的选定值并将其存储在 session 变量中?

javascript - 如果选中单选按钮更改父背景颜色

html - 绝对div被切断

javascript - 为 24 格式 jq 制作输入类型时间

html - 如何在完成后禁用 CSS 动画

jquery - 单击页面上其他位置后如何隐藏 Bootstrap 打开的折叠菜单