5
내 웹 사이트에 드롭 다운 메뉴를 만들고, 한 가지와는 별개로 작업을 완료했습니다.드롭 다운에서 마우스를 가져 가면서 목록 항목을 활성 상태로 유지하는 방법은 무엇입니까?
드롭 다운 메뉴에서 마우스를 가져 가면 메인 메뉴 링크의 마우스 오버 상태가 더 이상 마우스를 가리키지 않아 사라집니다.
드롭 다운 항목에서 마우스를 가져 가면 링크에서 활성 상태의 스타일을 유지할 수 있습니까?
첫 번째 목록 항목을 가리키면 내가 말한 호버 상태와 드롭 다운이 표시됩니다. 코드를로 복사했습니다. 여기
은 또한 코드 :/*Main nav*/
.main_nav_container{
margin-top:10px;
margin-bottom:10px;
display:block;
float:right;
}
ul.main_nav{
margin:0;
padding:0;
}
ul.main_nav li{
display:inline-block;
margin:0;
padding:0;
}
ul.main_nav li a{
font-size:13px;
display:block;
font-weight:bold;
position:relative;
height:25px;
line-height:25px;
padding:0 13px;
text-decoration:none;
color:#1122cc;
border:1px solid transparent;
}
ul.main_nav li a:hover{
text-decoration:underline !important;
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
}
ul.main_nav li ul{
display:none;
position:absolute;
background: #fff;
margin:0;
padding:0;
border:solid 1px #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
ul.main_nav li ul:hover #hover{
border:#ccc 1px solid;
}
ul.main_nav li ul li{
display:block;
margin:0;
padding:0;
text-align:left;
}
ul.main_nav li ul li a{
font-weight:normal;
}
ul.main_nav li:hover ul{
display:inline;
}
HTML
<div class="main_nav_container">
<ul class="main_nav">
<li>
<a id="hover" href="#">For sale</a>
<ul>
<li><a href="#">Property for sale</a></li>
<li><a href="#">New homes for sale</a></li>
<li><a href="#">Find estate agents</a></li>
</ul>
</li>
<li><a href="#">To rent</a></li>
<li><a href="#">New homes</a></li>
<li><a href="#">House prices</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Property advice</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
하! 질문을 더 신중하게 읽어야합니다. – Mathletics
또한 다음을 지원하는 probles가있을 수 있습니다. 비 링크 요소의 호버. 조심해! –
우수 포인트; IE6에서는 작동하지 않습니다. – Mathletics