ドロップダウン・ホバーはまだ静止していません

Question

私はこのドロップダウン・メニューを固定されたトップ・バーで実行しようとしています。
私はチュートリアルやフォーラムをたくさん見てきましたが、何も私を助けませんでした。

私はできません：私は「Trabalhos」ボタンからカーソルを降りるとき

1. はまだドロップダウンを作成します。
2. サブメニューが表示されている最上部のバー要素を作成します。「Contato」ボタンが浮いているかのようにバーから出てきます。

Here is the code in CSSDesk（あなたは大きな問題見ることができるようにHTML/CSSのサイドバーを非表示にしてください。カーソルが「Trabalhos」ボタンの周囲を通過するときのオン/オフホバー点滅の多くを）。

私が一番最初にいるので、私のコードが乱雑であればごめんなさい（それは本当に、私に教えてください場合！）

#fixtop { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
#fixtop>ul { 
 
    margin: 10px auto; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    display: table; 
 
    list-style: none; 
 
} 
 

 
#fixtop>ul>li { 
 
    padding: 0 90px 0 90px; 
 
    cursor: default; 
 
    transition: 0.2s; 
 
    float: left; 
 
} 
 

 
#fixtop>ul>li>a:hover { 
 
    color: yellow; 
 
    transition: 0.2s; 
 
} 
 

 
#topbuttons #bottrab:hover~#submenu { 
 
    display: table; 
 
} 
 

 
/*SUBMENU AREA*/ 
 

 
#submenu { 
 
    position: relative; 
 
    display: none; 
 
} 
 

 
#submenu>a { 
 
    padding: 10px; 
 
    position: relative; 
 
    top: 50px; 
 
    width: 300px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    font-size: 0.8em; 
 
    text-align: center; 
 
    color: white; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: block; 
 
    z-index: 3; 
 
    border-radius: 2px; 
 
} 
 

 
#submenu>nav>a:hover { 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: 0.2s; 
 
}

<header id="fixtop"> 
 
    <ul id="topbuttons"> 
 
    <li><a href="#">Sobre mim</a></li> 
 
    <li><a href="#" id="bottrab">Trabalhos</a> 
 
     <div id="submenu"> 
 
     <a href="#">Manipulação de imagem</a> 
 
     <a href="#">Diagramação</a> 
 
     <a href="#">Programação Web</a> 
 
     <a href="#">Design de logo</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">Contato</a></li> 
 
    </ul> 
 
</header>

Answer 1

サブメニューがあるので、メインメニュー要素の子である場合、そのメインメニュー要素のサイズが表示されたら拡大します。その結果、メニュー項目はマウスカーソルから離れて移動します。表示されると、サブメニューが閉じ、メインメニュー項目がマウスカーソルの下に戻ります。このサイクルは、ホバー状態と非ホバー状態との間の振動を引き起こす。

解決策の1つは、サブメニューをposition:absoluteに設定してドキュメントフローから削除することです。しかしこれは、メインメニュー項目のホバーエリアにはサブメニューのエリアが含まれないので、メインメニュー項目からマウスを離すとサブメニューが閉じるということも意味します。これを解決するために、別の:hover定義を#submenu要素に追加しました。以下の例の作業

#submenu { 
    position: absolute; 
    display: none; 
} 

#topbuttons #bottrab:hover~#submenu, 
#submenu:hover { 
    display: table; 
} 

：

#fixtop { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
#fixtop ul { 
 
    padding: 0; 
 
    margin: 10px 0; 
 
    color: white; 
 
    font-size: 1.2em; 
 
    display: table; 
 
    list-style: none; 
 
} 
 

 
#fixtop ul li { 
 
    padding: 0 20px; 
 
    cursor: default; 
 
    transition: 0.2s; 
 
    float: left; 
 
} 
 

 
#fixtop ul li>a:hover { 
 
    color: yellow; 
 
    transition: 0.2s; 
 
} 
 

 
#topbuttons #bottrab:hover~#submenu, 
 
#submenu:hover { 
 
    display: table; 
 
} 
 

 

 
/*SUBMENU AREA*/ 
 

 
#submenu { 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
#submenu a { 
 
    padding: 10px; 
 
    position: relative; 
 
    top: 18px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    font-size: 0.8em; 
 
    text-align: center; 
 
    color: white; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    display: block; 
 
    z-index: 3; 
 
    border-radius: 2px; 
 
} 
 

 
#submenu a:hover { 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: 0.2s; 
 
}

<header id="fixtop"> 
 
    <ul id="topbuttons"> 
 
    <li><a href="#">Sobre mim</a></li> 
 
    <li><a href="#" id="bottrab">Trabalhos</a> 
 
     <div id="submenu"> 
 
     <a href="#">Manipulação de imagem</a> 
 
     <a href="#">Diagramação</a> 
 
     <a href="#">Programação Web</a> 
 
     <a href="#">Design de logo</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="#">Contato</a></li> 
 
    </ul> 
 
</header>