jquery下拉菜單改變懸停的字體重量

我做了一個菜單，在jQuery中的下拉菜單，除了當你在mac上的safari中查看它時，一切正常，它改變了下拉菜單顯示時的字體重量。jquery下拉菜單改變懸停的字體重量

對於我需要改變以解決問題，我非常無能。你們能不能給我一隻手，將不勝感激：

你可以看到現場版：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>

來源

2015-10-15 fragstar

你可以包括在的jsfiddle這個例子中（很容易使人們看到它在行動） – Jaap

哪裏是在你的HTML下拉菜單？ – makshh

[JSFIDDLE]（https://jsfiddle.net/ao0yg39t/），確實沒有可見的下拉菜單！ – Rotan075

字體呈現的問題，試試這個：

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

來源

2015-10-15 14:59:28 makshh

jquery下拉菜單改變懸停的字體重量

回答

相關問題