無法在li元素上應用顯示屬性

我是CSS，HTML的新手，並試圖理解lists.however有什麼困惑我。正如你可以看到我的HTML下面我想創建一個下拉導航欄。什麼我不明白的是爲什麼顯示屬性不能在單個li元素上工作。無法在li元素上應用顯示屬性


 
.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應該是這樣的：

<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>

這沒什麼不對您的HTML ，只是一個不匹配<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不是li標記的父類hidden。因此它永遠不會觸發懸停。無論何時觸發將鼠標懸停在父容器上，它都會逐漸下滑並找到其子項並執行某種形式的操作。

對於您的情況，您嘗試使用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元素上應用顯示屬性

回答

相關問題