title: CSS Issues with Safari 10.0
body: <p>I've been designing a website for myself through Wordpress and have been attempting to edit the CSS that controls the menu on the site, I have attempted to shrink the menu so it's not as thick as it was originally. It looks good on all my browsers, but I have tried it on a MAC running Safari 10.0, but the menu seems to not want to shrink properly. The menu items that contain the drop down boxes are in the original spots and have no moved up.
  As you can see, Chrome looks good.
  <a href="http://i.stack.imgur.com/4bMiW.jpg" rel="nofollow">Chrome Image</a></p>
  
  <p>And Safari's menu is no good.
  <a href="http://i.stack.imgur.com/dkSrd.png" rel="nofollow">Safari 10.0</a></p>
  
  <p>The CSS that runs this menu is as below;</p>
  
  <pre><code>#navigation-menu {
      position:absolute;
      top:0;
      font-size:14px;
      height:28px;
      width: 100%;
  }
  .navigation-menu {
      position:relative;
      z-index:101;
  }
  #main-menu {
      /*background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;*/
      /*background: #f0f0f0;*/
      background: #555555;
      width: 100%;
      position:relative;
      z-index:auto;
      height:28px;
      margin-bottom:0;
      border-top: 4px solid #000;
  }
  #dropdown-holder {
      display: block;
      position:relative;
  }
  #navigation-menu &gt; ul {
      padding-top: 1px;
  }
  #navigation-menu &gt; * {
      padding:0;
      margin:0;
      font-size: 1em;
  }
  #navigation-menu ul.sf-menu {
      padding: 0;
      margin-top: 0;
      height: inherit;
  }
  #navigation-menu ul.sf-menu &gt; li {
      background: none;
      list-style: none;
      float: left;
      margin: 0 0 0 -3px;
  }
  #navigation-menu ul.sf-menu a.default-cursor {
      cursor: default;
  }
  #navigation-menu ul.sf-menu &gt; li &gt; a {
      display: block;
      padding: 0px 40px 0px 0;
      /*color: #E8E8E8;*/
      color: #FFF;
      text-decoration: none;
      border: 0 none;
      cursor: pointer;
      text-transform: none;
      font-weight: 400;
  }
  #navigation-menu ul.sf-menu a {
      line-height: 1.2em;
      padding:8px 16px;
  }
  #navigation-menu ul.sf-menu a.sf-with-ul:after {
      top: 18px !important;
  }
  #navigation-menu ul.sf-menu ul a.sf-with-ul:after {
      top: 0.9em !important;
  }
  #navigation-menu ul.sf-menu &gt; li &gt; a &gt; span {
      display: block;
      padding: 3px 0 3px 40px;
      color: #fff;
      line-height: 22px;
      /*border-left: 1px solid #d8d8d8;*/
      border-left: 1px solid #777777;
  }
  #navigation-menu ul.sf-menu &gt; li {
      margin: 0 0 0 -3px;
  }
  #navigation-menu ul.sf-arrows &gt; li &gt; a.sf-with-ul {
      padding: 10px 26px 10px 0;
  }
  #navigation-menu ul.sf-arrows &gt; li &gt; a.sf-with-ul:hover {
      padding: 10px 26px 10px 0;
  }
  #navigation-menu ul.sf-arrows &gt; li &gt; a.sf-with-ul:after {  /* give all except IE6 the correct values */
      padding: 10px 0 10px 0;
  }
  #navigation-menu ul.sf-menu &gt; li &gt; a:hover {
      color: #999;
      text-decoration: none;
  }
  #navigation-menu ul.sf-menu &gt; li &gt; a:hover span {
      color: #777;
  }
  
  #navigation-menu ul.sf-menu &gt; li.current-menu-item &gt; a,
  #navigation-menu ul.sf-menu &gt; li.current_page_item &gt; a {
      color: #FFF;
      text-decoration: underline;
  }
  #navigation-menu ul.sf-menu &gt; li.current-menu-item &gt; a &gt; span,
  #navigation-menu ul.sf-menu &gt; li.current_page_item &gt; a &gt; span {
      color: #F95A09;
  }
  #navigation-menu ul.sf-menu &gt; li.current-menu-item &gt; a &gt; span:hover,
  #navigation-menu ul.sf-menu &gt; li.current_page_item &gt; a &gt; span:hover {
      color: #777;
  }
  </code></pre>
  
  <p>The Menu's source code CSS is below</p>
  
  <pre><code>/*** ESSENTIAL STYLES ***/
  .sf-menu, .sf-menu * {
      margin:         0;
      padding:        0;
      list-style:     none;
  }
  .sf-menu {
      line-height:    1.0;
  }
  .sf-menu ul {
      position:       absolute;
      top:            -999em;
      width:          10em; /* left offset of submenus need to match (see below) */
  }
  .sf-menu ul li {
      width:          100%;
  }
  .sf-menu li:hover {
      visibility:     inherit; /* fixes IE7 'sticky bug' */
  }
  .sf-menu li {
      float:          left;
      position:       relative;
  }
  .sf-menu a {
      display:        block;
      position:       relative;
  }
  .sf-menu li:hover ul,
  .sf-menu li.sfHover ul {
      left:           0;
      top:            28px; /* match top ul list item height */
      z-index:        99;
  }
  ul.sf-menu li:hover li ul,
  ul.sf-menu li.sfHover li ul {
      top:            -999em;
  }
  ul.sf-menu li li:hover ul,
  ul.sf-menu li li.sfHover ul {
      left:           10em; /* match ul width */
      top:            0;
  }
  ul.sf-menu li li:hover li ul,
  ul.sf-menu li li.sfHover li ul {
      top:            -999em;
  }
  ul.sf-menu li li li:hover ul,
  ul.sf-menu li li li.sfHover ul {
      left:           10em; /* match ul width */
      top:            0;
  }
  
  /*** DEMO SKIN ***/
  .sf-menu {
      float:          left;
      margin-bottom:  1em;
  }
  .sf-menu a {
      padding:        .75em 1em;
      text-decoration:none;
  }
  .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
      color:          #777;
  }
  .sf-menu a:hover  { 
      color:          #222;
  }
  .sf-menu li {
      background:     transparent;
  }
  .sf-menu li li {
      background: url('../images/sf-menu-bg.png') no-repeat 0 100%;
  }
  .sf-menu li:hover, .sf-menu li.sfHover,
  .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
      outline:        0;
  }
  
  /*** arrows **/
  .sf-arrows a.sf-with-ul {
      padding-right:  2.25em;
      min-width:  1px; /* trigger IE7 hasLayout so spans position accurately */
  }
  .sf-arrows .sf-with-ul:after,
  .sf-arrows .top_bg_color .sf-with-ul:after {
      content: '';
      position:       absolute !important;
      display:        block !important;
      right:          10px !important;
      top:            1.05em !important; /* IE6 only */
      width:          10px !important;
      height:         10px !important;
      text-indent:        -999em !important;
      overflow:       hidden !important;
  }
  /* indicator image for light background */
  .sf-arrows .sf-with-ul:after {
      background:     url('../images/auto-arrows.png') no-repeat -10px -100px !important; /* 8-bit indexed alpha png. IE6 gets solid image only */
  }
  /* indicator image for dark background */
  .top-bg-color-dark .sf-arrows .sf-with-ul:after {
      background:     url('../images/auto-arrows.png') no-repeat -30px -100px !important; /* 8-bit indexed alpha png. IE6 gets solid image only */
  }
  
  .sf-arrows a.sf-with-ul:after {  /* give all except IE6 the correct values */
      top:            .8em !important;
      background-position: 0 -100px !important; /* use translucent arrow for modern browsers*/
  }
  /* hovers for light background */
  .sf-arrows a.sf-with-ul:focus:after,
  .sf-arrows a.sf-with-ul:hover:after,
  .sf-arrows a.sf-with-ul:active:after,
  .sf-arrows li:hover &gt; a.sf-with-ul:after,
  .sf-arrows li.sfHover &gt; a.sf-with-ul:after {
      background-position: -10px -100px !important; /* arrow hovers for modern browsers*/
  }
  /* hovers for dark background */
  .top-bg-color-dark .sf-arrows a.sf-with-ul:focus:after,
  .top-bg-color-dark .sf-arrows a.sf-with-ul:hover:after,
  .top-bg-color-dark .sf-arrows a.sf-with-ul:active:after,
  .top-bg-color-dark .sf-arrows li:hover &gt; a.sf-with-ul:after,
  .top-bg-color-dark .sf-arrows li.sfHover &gt; a.sf-with-ul:after {
      background-position: -40px -100px !important; /* arrow hovers for modern browsers*/
  }
  /* point right for anchors in subs */
  .sf-arrows ul .sf-with-ul:after { background-position:  -10px 0 !important; }
  .sf-arrows ul a.sf-with-ul:after { background-position:  0 0 !important; }
  /* apply hovers to modern browsers */
  .sf-arrows ul a.sf-with-ul:focus:after,
  .sf-arrows ul a.sf-with-ul:hover:after,
  .sf-arrows ul a.sf-with-ul:active:after,
  .sf-arrows ul li:hover &gt; a.sf-with-ul:after,
  .sf-arrows ul li.sfHover &gt; a.sf-with-ul:after {
      background-position: -10px 0 !important; /* arrow hovers for modern browsers*/
  }
  
  .u-design-menu-drop-shadows-on .sf-menu ul {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  }
  </code></pre>
  
  <p>And the HTML direct from the page.</p>
  
  <pre><code>&lt;div class="clear"&gt;&lt;/div&gt;
  
              &lt;div id="main-menu" class="pngfix"&gt;
  
                  &lt;div id="dropdown-holder" class="container_24"&gt;
  
  &lt;div id="navigation-menu" class="navigation-menu"&gt;&lt;ul id="main-top-menu" class="sf-menu"&gt;&lt;li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"&gt;&lt;a href="http://new.3dedge.com.au/"&gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"&gt;&lt;a href="http://new.3dedge.com.au/about/"&gt;&lt;span&gt;about&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"&gt;&lt;a href="http://new.3dedge.com.au/services/"&gt;&lt;span&gt;services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-504"&gt;&lt;a href="http://new.3dedge.com.au/gallery/"&gt;&lt;span&gt;gallery&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"&gt;&lt;a href="http://new.3dedge.com.au/blog/"&gt;&lt;span&gt;blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"&gt;&lt;a href="http://new.3dedge.com.au/faq/"&gt;&lt;span&gt;faq&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"&gt;&lt;a href="http://new.3dedge.com.au/downloads/"&gt;&lt;span&gt;downloads&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"&gt;&lt;a href="http://new.3dedge.com.au/contact-us/"&gt;&lt;span&gt;contact us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"&gt;&lt;a href="http://new.3dedge.com.au/links/"&gt;&lt;span&gt;links&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- end dropdown-holder --&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>I am honestly not sure what causes the menu to deform in Safari 10.0. Does anyone have any ideas?
  Thanks!</p>