ホバーでドロップダウンメニューが表示されない

Question

ドロップダウンメニューを作成しようとしていますが、ホバーが目的の表示エフェクトを生成していません。私はマウスがリスト要素の上を移動するときにドロップダウンメニューを表示したいだけです。私はHTMLとCSSに新しいので、私は自分の誤りを特定できません。

関連するHTML：

#strip{ 
 
    \t width: 950px; 
 
    \t height: 28px; 
 
    \t background-color: #2c276d; 
 
    \t font-size: 10pt; 
 
    } 
 
    
 
    .strip{ 
 
    \t margin:0; 
 
    \t padding: 0; 
 
    } 
 
    
 
    .strip li{ 
 
    \t list-style-type: none; 
 
    \t float: left; 
 
    } 
 
    
 
    .strip li a { 
 
    \t color: white; 
 
    \t text-decoration: none; 
 
    \t display: block; 
 
    \t text-align: center; 
 
    \t width:140px; 
 
    \t height:23px; 
 
    \t padding-top:5px; 
 
    \t border-right: 1px solid #FFFFFF; 
 
    } 
 
    
 
    .strip li.shrt a{ 
 
    \t width: 145px; \t 
 
    } 
 
    
 
    .dropdown { 
 
    \t position: relative; 
 
    \t display: inline-block; 
 
    } 
 
    
 
    .dropcmpy { 
 
    \t display: none; 
 
    \t position: absolute; 
 
    \t background-color: #2c276d; 
 
    \t font-size: 10pt; 
 
    \t width: 145px; 
 
    } 
 
    
 
    .dropcmpy a { \t 
 
    \t color: white; 
 
    \t display: block; 
 
    \t text-decoration: none; 
 
    \t padding: 5px; 
 
    \t border-top: 1px solid #FFFFFF; 
 
    } 
 
    
 
    .strip li a:hover{ 
 
    \t background-color: #28A2D5; 
 
    } 
 
    
 
    li.shrt:hover .dropcmpy { 
 
    \t display: block; 
 
    }

<div id="main"> 
 
    \t <div id="strip"> 
 
    \t \t <ul class="strip"> 
 
    \t \t \t <li class="shrt"><a href="#">Com</a></li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    \t <div class="dropcmpy"> 
 
    \t \t <a href="#">Key</a> 
 
    \t \t <a href="#">Ad</a> 
 
    \t \t <a href="#">Fac</a> 
 
    \t \t <a href="#">Car</a> 
 
    \t \t <a href="#">FAQ</a> 
 
    \t </div> 
 
    </div>

どんなに私はCSSの最後のピースをフォーマットする方法、それは私が行う場合を除き、ドロップダウンメニューを生成しません

#main:hover .dropcmpy { 
     display: block; 
    } 

、または最初のdivにクラスを与え、それを使用します。それ以外の場合、ドロップダウンメニューは表示されません。これは、ストリップ全体がメニューを生成するという問題を提示しますが、私はシュートだけを必要とします。

Answer 1

cssでホバー上のオブジェクトを表示するには、そのオブジェクトは、ホバーされているものの兄弟または子でなければなりません（親セレクターがないため）。これはあなたのコードでは当てはまりません。

だから、あなたは、いくつかのオプションがあります。

• はli.shrtのdiv.dropcmpy子を作成します。 （Teuta Koraqi's answerのように）

• ハック。空の疑似要素（.dropcmpy::before）を使用し、それを絶対にli.shrtに配置し、それをホバー要素として使用します。私はあなたのページの構造が何であるかを知らないのjavascript

使用はそうあなたのための最良のだろうこれらのどのと言うことはできません。あなたがそれを管理できるならば、最初は確かにきれいです。

Answer 2

問題は継承にあります。あなたが使用しようとしている最後のブロックは.shrt（明らかに存在しない）の子である.dropcmpy要素を探しています。 .dropcmpyが#mainの子だからです。

#mainをホバーリスナーとして使用しても、ドロップダウンに関連するすべてがその中に含まれているため、何の問題もありません。

Answer 3

@ JohnCHからのリマインダの後、私はあなたが望むと思う機能を得るために、このような兄弟セレクタを行うことができることに気付きました。

#strip:hover+.dropcmpy { 
    display: block; 
} 

Answer 4

ジョンが述べたように、セレクタ.class1 .class2クラス=「クラス1」の要素の子であるクラス=「クラス2」の要素をターゲットにしています。

これは、ドロップダウンメニューを要素の内側に配置する必要があることを意味します。つまり、ドロップしたときにドロップダウンを表示するはずです。

Usuallの方法は、例えば、それを行う必要があります

<div id="main"> 
    <div id="strip"> 
     <ul class="strip"> 
      <li class="shrt"> 
       <a href="#">Com</a> 
       <ul class="dropcmpy"> 
        <li><a href="#">Key</a></li> 
        <li><a href="#">Ad</a></li> 
        <li><a href="#">Fac</a></li> 
        <li><a href="#">Car</a></li> 
        <li><a href="#">FAQ</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

とCSS

.dropcmpy {display: none;} 
.shrt:hover .dropcmpy {display: block;} 

ために、ボタンの内側に別のリストを使用している、それが参考:)だった願っています。