サブメニューの存在を示すために、FontAwesome アイコン「キャレット右」をメニューの 3 つの li/a タグに適用しました。アイコンは右揃えにする必要があります。私のコードは Chrome と Edge では機能しますが、Firefox では機能しません。CDN 経由で FA ファイルをロードする際に発生する可能性のある問題について読んだので、Web スペースからロードするように切り替えましたが、成功しませんでした。メニュー項目の最後にアイコンが表示されていますが、それらが切り取られて押し下げられています。ここに私のHTMLとCSSがあります：
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/960.css" />
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<title>Titel</title>
<style type="text/css">
body, select, input, textarea, button {
font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 1.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav > ul > li {
float: left;
}
nav > ul > li > ul {
display: none;
}
nav > ul a {
display: block;
white-space: nowrap;
padding: 10px;
background: #444;
color: #fff;
text-decoration: none;
}
nav > ul > li > a:after {
content: "\f0d7";
font-family: 'FontAwesome';
padding-left: 0.35em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
nav > ul > li > ul > li {
position: relative;
}
nav > ul > li > ul > li > a:after {
float: right;
content: "\f0da";
font-family: 'FontAwesome';
padding-left: 1em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li > ul > li > ul {
display: none;
}
nav > ul > li > ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
</style>
</head>
<body>
<nav>
<ul class="grid_12">
<li><a href="#">Home</a></li>
<li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
<li><a href="#">Clubturniere</a>
<ul>
<li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
<li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
</ul>
</li>
<li><a href="./mannschaft/mannschaften.php">Mannschaften</a>
<ul>
<li><a href="#">Bayerische Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m1.php">1. Mannschaft</a></li>
<li><a href="./mannschaft/m2.php">2. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Münchner Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m3.php">3. Mannschaft</a></li>
<li><a href="./mannschaft/m4.php">4. Mannschaft</a></li>
<li><a href="./mannschaft/m5.php">5. Mannschaft</a></li>
<li><a href="./mannschaft/m6.php">6. Mannschaft</a></li>
<li><a href="./mannschaft/m7.php">7. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Senioren</a>
<ul>
<li><a href="./mannschaft/sen_m1.php">Senioren 1</a></li>
<li><a href="./mannschaft/sen_m2.php">Senioren 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="./termine/termine.php">Termine</a></li>
<li><a href="#">Schachaufgaben</a>
<ul>
<li><a href="./aufgaben/schachaufgaben_1.php">Nummer 1 – 18</a></li>
<li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19 – 36</a></li>
</ul>
</li>
<li><a href="./archiv/archiv.php">Archiv</a></li>
<li><a href="./kontakt/kontakt.php">Kontakt</a></li>
</ul>
</nav>
</body>
</html>ファイルへのリンクはhttp://msc1836.bplaced.net/menutest.htmlです 。OS は Win-10、Firefox のバージョンは 50.1.0 です。
誰でも助けることができますか？Thx、マイク