li 요소에 display 속성을 적용 할 수 없습니다.

저는 CSS, HTML에 대한 초보자이며 list.however가 혼란스러워합니다. 아래에서 볼 수있는 것처럼 내 HTML을 탐색 막대를 드롭 다운하려고합니다. 나는 이해가 안되는 이유는 단일 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;} 
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 너무 잘못 여기

출처

2017-04-01 satya18948

은 당신이 당신의 메뉴를 원하는 것을 설명 할 수 닮았나요? – Larpee

작동 중입니다 .. 문제를 확장하고보고있는 내용을 표시하십시오. – Squeakasaur

.home : hover ~ .hidden {display : block;} 추가하면 작동합니다. 하지만이 질문에 대한 답을 유지하면서 드롭 다운 메뉴를 만드는 것은 적절하지 않습니다. –


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

당신이 사용해야하는 새 CSS입니다 , 단지 불일치 <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

이 속성은 단일 리튬 요소에서 작동하지 않습니다 표시 이유입니다.

.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 속성을 적용 할 수 없습니다.

답변

관련 문제