0
私は自分のhtml/CSSパターンに次のような問題があります。入れ子の固定位置
固定トップメニュー（高さ110px）があります。この固定メニューでは、ホバー上にのみ表示されるカートを作成しようとしています。 その目的のために、私は、カーソルがホバーしているときだけ表示するdivを使用しています。
これはFirefoxとChromeで動作します。 "ホバーコンテンツ"という名前のdivは流れ出していません。 しかし、Safariでは期待通りに動作しません。 divはトップメニュー内に表示されますが、流れから外れるわけではありません。
あなたは私がSafariでこの問題を解決する可能性がどのように任意のアイデアを持っていますか？
ご協力いただきありがとうございます。
Singertwist
.menu-top-commander {
background-color: #FFFFFF;
height: 100px;
display: flex;
flex-direction: row;
position: fixed;
transition-duration: 0.5s;
box-sizing: border-box;
right: 0;
padding-left: 110px;
align-items: center;
overflow: hidden;
}
.menu-top-commander-texte:first-child {
margin-left: 25px;
padding: 10px 10px 10px 0;
font-size: 25px;
color: #CE3734;
border-right: solid;
border-width: 1px;
}
.menu-top-commander-texte:nth-child(2) {
width: 100%;
}
.menu-top-commander-texte .menu-top-commander-texte-lien {
display: inline-flex;
padding: 10px 10px 10px 10px;
overflow-wrap: break-word;
word-wrap: break-word;
margin: 0;
font-size: 20px;
}
.menu-top-commander-texte p a {
color: #000000;
}
.menu-top-commander-smaller {
background-color: #FFFFFF;
height: 65px;
transition-duration: 0.5s;
}
.menu-top-commander-texte-lien:last-child {
float: right;
padding-right: 50px;
}
#hover-content {
display: none;
position: fixed;
background-color: #f9f9f9;
width: 200px;
min-height: 100px;
max-height: 300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
transform: translate(-200px, 50px);
overflow-y: scroll;
perspective: 1000;
}
.menu-top-commander-texte-lien:last-child:hover #hover-content {
display: block;
}
.menu-top-commander-texte-lien:last-child img {
width: 30px;
height: auto;
}
@media only screen and (max-width: 699px) {
.menu-top-commander {
display: flex;
flex-direction: column;
padding-left: 0px;
position: relative;
height: auto;
justify-content: center;
}
.menu-top-commander-texte:first-child {
margin-left: 0;
width: 100%;
border-style: none;
}
.menu-top-commander-texte {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.menu-top-commander-texte p {
font-size: 18px;
}
.menu-top-commander-texte-lien:last-child {
float: right;
}
}<div class="menu-top-commander">
<div class="menu-top-commander-texte">Menu</div>
<div class="menu-top-commander-texte">
<div class="menu-top-commander-texte-lien">
<p><a href="">Plats</a></p>
</div>
<div class="menu-top-commander-texte-lien">
<p><a href="">A-Côtés</a></p>
</div>
<div class="menu-top-commander-texte-lien">
<p><a href="">Boissons</a></p>
</div>
<div class="menu-top-commander-texte-lien">
<p><a href="">Desserts</a></p>
</div>
<div class="menu-top-commander-texte-lien">
<p>
<a href=""><img src="img/icones/shopping-cart.png" alt="shopping cart"></a>
</p>
<div id="hover-content">
Content.
</div>
</div>
</div>
</div>
、私たちのために再構築することは困難である、あなたの助けをいただき、ありがとうございます。おそらくそれを追加できますか？とにかく、体の一番下にメニューがありますか？ 「