div의 (드롭 다운 메뉴를 포함하는) 위치를 상대로 설정하고 드롭 다운 메뉴 div의 위치를 절대로 설정하면 드롭 다운 메뉴의 마지막 항목 만 표시됩니다. 드롭 다운 메뉴 컨테이너 div를 상대로 설정하면 드롭 다운 메뉴 div 위치 지정을 그대로두면 작동합니다. 그러나 이는 페이지의 나머지 부분에 영향을줍니다. 따라서 페이지의 다른 부분에 영향을주지 않고 드롭 다운이 작동하도록 위치를 설정하는 방법.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test"><a href="home.php">Home</a></div>
<div class="test" id="product"><a href="produt.php">Products</a>
<div class="test1"><a href="about.php">shirt</a></div>
<div class="test1"><a href="about.php">Pant</a></div>
<div class="test1"><a href="about.php">inner</a></div>
<div class="test1"><a href="about.php">cap</a></div>
</div>
<div class="test"><a href="about.php">About</a></div>
<div class="test"><a href="contact.php">contact Us</a></div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
디스플레이 속성도 시도했습니다. 같은 결과. 문제가 어디에 있는지 알고 있으면 도와주세요.
여기서 문제는 position:absolute모든 하위 메뉴 div에서 사용 하고 있다는 것 입니다. 이것은 본질적으로 그것들을 서로 겹치게 만드는 것입니다 (마지막 하나는 맨 위에 둡니다).
이에 대한 한 가지 해결책은 이러한 모든 요소를 컨테이너 div에 래핑하고 숨겨 지거나 표시되는 것을 만드는 것입니다.
하위 메뉴는 다음과 같습니다.
<div class="test1">
<div><a href="about.php">shirt</a></div>
<div><a href="about.php">Pant</a></div>
<div><a href="about.php">inner</a></div>
<div><a href="about.php">cap</a></div>
</div>
그리고 CSS는 약간 변경됩니다.
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다