Jquery下拉菜单在悬停时更改字体粗细答案

【问题标题】：Jquery dropdown menu changes font weight on hoverJquery下拉菜单在悬停时更改字体粗细
【发布时间】：2015-10-15 22:59:28
【问题描述】：

我在 jQuery 中制作了一个带有下拉菜单的菜单，除了在 Mac 上的 safari 中查看它时，它会在下拉菜单显示时更改字体粗细。

对于我需要更改哪些内容才能修复它，我一无所知。各位大侠能帮我一下吗，不胜感激：

您可以看到实时版本：autooffer.dk（悬停“mærker”）并注意其他菜单更改字体粗细

jQuery:

  /* DROPDOWN & MENU ANIMATIONS */ 

var mindicator = $('.dropdown_indicator');
mindicator.hide();
var dropdown = $('.dropdown')
dropdown.hide();   

$(".hover_brands").hover(
      function () {
         dropdown.finish().slideDown(200);
         /*mindicator.css("display","block");*/
      }, 
      function () {
         dropdown.finish().slideUp(200);
        /* mindicator.css("display","none");*/
      }
);

dropdown.mouseover(
  function () {
    dropdown.stop(true, true).slideDown(0);
    /*mindicator.css("display","block");*/
  }
); 

dropdown.mouseleave(
  function () {
    dropdown.finish().slideUp(200);
    /*mindicator.css("display","none");*/
  }
);   

 mindicator.mouseover(
  function () {
    dropdown.stop(true, true).slideDown(0);
  }
); 

mindicator.mouseleave(
  function () {
    dropdown.finish().slideUp(200);
  }
);

CSS：

#menu
{
    width: 100%;
    height: 45px;
    background: #3e6f9b;
    color: #fff;
    position: relative;
    font-size: 16px;
}

#menu ul
{
    margin:0px;
    padding: 0px;
    list-style: none;
    position: relative;
    top: 10px;
    margin-left: 60px;
}

#menu ul li
{
    display: block;
    float: left;
    margin-right: 35px;
    color: #fff;    
    text-decoration: none;
    -webkit-transition: 0.3s; /* Safari */
    transition: 0.3s;
    border-radius: 5px;
    padding:2px 5px 2px 5px;
}

#menu ul li:hover
{
    -webkit-transition: 0.3s; /* Safari */
    transition: 0.3s;
    background: #36536e;
}

#dropdown
{
    width: 100%;
    height: auto;
    min-height: 150px;
    background: #28abe3;
    position: relative;
    display: none;
    color: #fff;
    font-weight: normal;
    font-size: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    z-index: 2;
}

HTML：

 <div id="menu" class="fix_menu_hover">     
            <ul class="nav">
                <a href="#PAGE#(HOME)" class="anchor_line">
                    <li>Vælg bil</li>
                </a>
                <a href="#PAGE#(TILBUD)" class="anchor_line">
                    <li>Tilbud</li>
                </a>
                <a href="#PAGE#(MAERKER)">
                    <li class="hover_brands">Mærker</li>
                </a>
            </ul>       
        </div>
   <div id="dropdown" class="dropdown"> 
        <ul>#LOOP_CARMAKES_ACTIVE#
            <a href="#PAGE_CARMAKE#">
                <li><div class="dropdown_dot"></div> 
               <span class="move_dropdown_txt">#CARMAKE_NAME#</span>
               </li>
            </a>
            #END#
        </ul>   
    </div>

【问题讨论】：

你可以把这个例子包含在一个 jsfiddle 中（让人们很容易看到它的实际效果）
HTML 中的下拉菜单在哪里？
JSFIDDLE ，确实看不到下拉菜单！
正如@Jaap 所说，这会很有帮助。 I've started one here for you，但它还没有运行。我不禁注意到您在 dropdown 和 dropdown_indicator 类上有事件处理程序，但这些类没有 HTML 元素。/
对不起，我为下拉列表添加了 html。我忘记了。有一些自定义标签包含在下拉列表中循环内容（忽略）

标签： javascript jquery html css safari

【解决方案1】：

字体渲染问题，试试这个：

body {
  -webkit-font-smoothing: subpixel-antialiased;
}

【讨论】：