Header Button's text/font-weight changing unintentionally

Question

I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.

 $(document).ready(function() { $('.hdr-drpdwn-menu').hide(); $('.hdr-list-more').hover( function() { $(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast'); }, function() { $(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast'); } ); }); 

 /* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */ body { margin: 0; padding: 0; } ul, li, p, h1, h2, h3, h4, h5, button { margin: 0; padding: 0; border: none; background-color: transparent; } ul, li { list-style: none; } a, a:active, a:visited { text-decoration: none; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background-color: #5a5a5a; font-style: normal; } #header .hdr-nav-opt { float: left; margin-left: 10px; background-color: transparent; } #header .hdr-nav-soc { float: right; margin-right: 10px; background-color: transparent; } .hdr-nav-list .hdr-list-tab{ display: inline; background-color: transparent; } .hdr-nav-list .hdr-list-tab .hdr-button { height: 40px; color: #fff; font-size: 20px; text-align: center; padding-left: 5px; padding-right: 5px; background-color: transparent; } .hdr-nav-list .hdr-list-tab .hdr-button:hover { background-color: #7D7D7D; } .hdr-drpdwn-menu { position: relative; width: 120px; margin-left: 40px; background-color: #5a5a5a; box-shadow: 2px 2px 10px #888888; border: 1px solid #888888; } .hdr-drpdwn-menu .hdr-button { width: 100%; height: 40px; color: #fff; font-size: 20px; text-align: center; padding-left: 5px; padding-right: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <!-- The Global Header of the website--> <div id="header"> <!-- The Left part of the header--> <div class="hdr-nav-opt"> <ul class="hdr-nav-list"> <li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>| <li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button> <!-- The Dropdown Menu--> <div class="hdr-drpdwn-menu"> <ul class="hdr-drpdwn-list"> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li> <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li> </ul> </div> </li> </ul> </div> <!-- The Right part of the header--> <div class="hdr-nav-soc"> <ul class="hdr-nav-list"> <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>| <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li> </ul> </div> </div> 

Answer 1

I don't know which font you are using now, but maybe you need a callback in your styles

.hdr-drpdwn-menu .hdr-button {
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 20px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

and it will works all the browsers.