liエレメントにdisplayプロパティを適用できません

CSS、HTMLの初心者です。リストを理解しようとしています。何か混乱します。下のHTMLを見ると、ナビゲーションバーを作成しようとしています。私は理解していないなぜプロパティを表示する1つのli要素で動作しませんです。ここでliエレメントにdisplayプロパティを適用できません


 
.block1{background-color:#736570;margin:0px;} 
 
ul a {color:white;} 
 
ul li{list-style-type: none; padding:5px;} 
 

 
.hidden {display:none;} 
 
.home:hover .hidden{display:block;} 
 
.hidden a:hover{background-color: #f1f1f1;}


 
<body> 
 
<ul class="block1"> 
 
    <li class="home"><a href="#">Home</a> 
 
    
 
    <li class="hidden"> 
 
    <a href="#">contact us</a> 
 
    </li> 
 
    
 
    <li><a href="#">about</a><li> 
 
    <li><a href="#">Investor</a></li> 
 
    <li> <a href="#">what we do</a></li> 
 
    </li> 
 
    </ul> 
 

 
</body>

出典

2017-04-01 satya18948

あなたがあなたのメニュー欲しいものを説明することができますのように見えるように？ – Larpee

作業中です。問題を拡大してください、そして/またはあなたが見ているものを見せてください。 – Squeakasaur

.home：hover〜.hidden {display：block;}これを追加すると動作します。しかし、これは、あなたがあなたの質問を維持しているようにドロップダウンメニューを作ることは適切ではありません。 –

あなたが使用する必要があり、新たなCSSです：

.block1{background-color:#736570;margin:0px;} 
ul a {color:white;} 
ul li{list-style-type: none; padding:5px;} 

.hidden{display:none;} 
.home:hover + .hidden{display:block;} 
li:hover{background-color: #f1f1f1;}

次に、あなたのHTMLは次のようになります。あなたのhtmlとあまりにも間違って

<body> 
<ul class="block1"> 
<li class="home"><a href="#">Home</a></li> 

    <li class="hidden" > 
    <a href="#">contact us</a> 
    </li> 

    <li><a href="#">about</a></li> 
    <li><a href="#">Investor</a></li> 
    <li> <a href="#">what we do</a></li> 
    </ul> 

</body>

ナッシング、ちょうど不一致<li>、あなたがしたいCSSこの記事を見て：ここでUsing only CSS, show div on hover over <a>

はJSFiddleです：Example of OP Code

出典

2017-04-01 21:07:01 Mark

OPがこのような点で気になるかどうかわかりませんが、どういう意味ですか？ jsfiddleによく見えます。 – Mark

@MrLister良いキャッチ。ありがとう、私は答えを編集しました。 – Mark

私は理解していないプロパティが単一li要素では動作しません表示する理由です。

クラス.homeのdivは、クラスhiddenのliタグの親ではありません。したがって、それは決してその上にホバーを誘発することはありません。親コンテナの上にマウスカーソルを置くと、トリクルして子供を見つけ、何らかのスタイリングを行います。

あなたの場合、display:noneを使用してliを非表示にし、ホバーで表示させようとしています。

親コンテナの上にカーソルを置くと、liタグが表示されているときにスニペットを検討してください。（以下このアプローチは、あなたのためのドロップダウンメニューがありませんが、それはあなたのホバーにその表示プロパティの変更を行うためにどのようにいくつかの洞察力を与えるです）

.block1 { 
 
    background-color: #736570; 
 
    margin: 0px; 
 
} 
 

 
ul a { 
 
    color: white; 
 
} 
 

 
ul li { 
 
    list-style-type: none; 
 
    padding: 5px; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.block1:hover .hidden { 
 
    display: block; 
 
} 
 

 
.hidden a:hover { 
 
    background-color: #f1f1f1; 
 
} 
 

 
.home

<html> 
 

 
<body> 
 
    <ul class="block1"> 
 
    <li class="home"><a href="#">Home</a> 
 

 
     <li class="hidden"> 
 
     <a href="#">contact us</a> 
 
     </li> 
 

 
     <li><a href="#">about</a> 
 
     <li> 
 
      <li><a href="#">Investor</a></li> 
 
      <li> <a href="#">what we do</a></li> 
 
     </li> 
 
    </ul> 
 

 
</body> 
 

 
</html>

出典

2017-04-01 21:08:45 repzero

liエレメントにdisplayプロパティを適用できません

答えて

関連する問題