chromeではドロップダウンメニューがうまく表示されるが、safariでずれてしまう。

Question

前提・実現したいこと

現在HTML,CSSでサイト作りを行なっています。
Chromeに合わせ、CSSを適用しているのですが、safariで開くとレイアウトが崩れてしまいます。
レイアウトが崩れてしまう部分は、headerに導入している、ドロップダウンメニューの箇所で、それ以外は崩れることなく表示できています。
リセットCSSなど調べてみたのですが、詳しく分からず、質問させていただきました。

発生している問題・エラーメッセージ

*safariで配置がずれる、

該当のソースコード

<div class="header-right">
               <ul class="list">
                 <li class="home"><a href="index.html">Home</a></li>
                 <li class="language">   <a href="#">Language</a>
                   <ul>
                    <li class="english"><a href="eindex.html">▶︎　English</a></li><br/>
                     <li class="chinese"><a href="#準備中#">▶︎　Chinese</a></li>
                   </ul>
                 </li>
                 <li class="contact"><a href="contact.index.html">Contact</a></li>
                <li><a href="https://www.facebook.com/%E5%96%AB%E7%85%99%E6%89%80%E3%83%8A%E3%83%93-2229320117146212/" class="btn facebook" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
                <li><a href="https://twitter.com/Japansmoking" class="btn twitter" target="_blank"><i class="fab fa-twitter-square"></i></a>
                </li>
                <div class="menu-icon">
                <li><a href="#">
                <i class="fas fa-bars"></i>
                </a>
                  <ul>
                    <li class="menu-home"><a href="index.html">Home</a></li><br/>
                     <li class="menu-language"><a href="#">Language</a>
                     </li>
                       <li class="menu-english"><a href="eindex.html">&nbsp▶︎ English</a></li>
                       <li class="menu-chinese"><a href="#準備中#">&nbsp▶︎ Chinese</a></li>
                     <br/>
                     <li class="menu-contact">
                     <a href="contact.index.html">Contact</a>
                     </li>
                   </ul>
                 </li>
                </div>
               </ul>
　          </div>

試したこと

appearance: none;
-webkit-appearance: none;

調べてこの２項目は試している現状です。

拙いコードで申し訳ありません、確認のほどよろしくお願いいたします。

サイトは、
smoking-area.info
で出てくるかと思います。

補足情報（FW/ツールのバージョンなど）

Comments

[yoshinavi]

質問は編集出来ますので、問題が発生している各コードを提示されると良いかと思います。

また、スクリーンショット等で、崩れている部分や、確認したブラウザのバージョン等も提示されると回答が、つきやすくなるかと思います。

[shin_0208]

編集しました。ありがとうございます。

Answer 1

safariがおかしいというよりは正しくはchromeが崩れてる状態です。

以下を追記

.header-right ul li {
    position: relative;
}
.language:hover ul {
  left: 0;
  top: 25px; // ここの数値は適当に書いてます
}

まず親にrelativeを与えて基準をつくりましょう。
次にhoverしたときに現れる子がabsoluteになっているのでtopとleftで、基準とした親からの距離を与えましょう。

そうすると子の幅が親とおなじになってしまい改行されてしまうので、

white-space: nowrap;

などで改行させない処置を取りましょう。
以上で動かしたい部分が動かせるようになります。

appearanceですがこれはformパーツに使うものなので、全くの見当違いです。特に何も起きません。

Comments

[shin_0208]

回答ありがとうございました。
改善できました。