드롭다운 2차메뉴 색 변경하는법 채택완료
길가던분
7년 전
조회 4,795
홈페이지 주소 : http://cleanermart.kr/shop/" target="_blank">http://cleanermart.kr/shop/
홈페이지나 아래 소스를 보시면 아시겠지만 청소기 광택기 세척기는 1차메뉴가 있고 하위메뉴가 있습니다. 그 하위메뉴에 있는(예를들어 진공청소기, 스팀청소기 같은것들) 텍스트만 항상 하얀색이도록 변경하고 싶은대 하위메뉴에 마우스를 올려놓으면 하얀색으로 나오는대 올려놓지 않은 상태에서는 배경색 그대로 나와서 어떻게 하면될까요?
shop.head.php
</p>
<p> <div class="menubar">
<ul>
<li><a href="">청소기</a>
<ul>
<li><a href="#" >진공청소기</a>
<li><a href="#" >스팀청소기</a>
</ul>
</li>
<li><a href="#" >광택기</a>
<ul>
<li><a href="#">마루광택기</a></li>
<li><a href="#">대리석광택기</a></li>
</ul>
</li>
<li><a href="#">세척기</a>
<ul>
<li><a href="#" >고압세척기</a>
<li><a href="#" >고압세척기용품</a>
</ul>
</li>
<li style="width:130px;"><a href="#" >탑승식청소차</a></li>
<li style="width:110px;"><a href="#" >SWEEPER</a></li>
<li style="width:120px;"><a href="#" >SCRUBBER</a></li>
<li><a href="#" >청소용품</a></li>
<li style="width:130px;"><a href="#" >새제, 소모품</a></li>
</ul>
</div></p>
<p>
default_shop.css
</p>
<p>.menubar{
border:none;
border:0px;
margin:0 auto;
padding:30px 0 0 0;
font-size:12px;
font-weight:bold;
width :1000px;
}</p>
<p>.menubar ul{
background-color:#ffffff;
height:40px;
list-style:none;
padding:0;
text-align:center;
}</p>
<p>.menubar li{
padding:0;
width:100px;
display:inline-block;
text-align:center;
color:ffffff;
}</p>
<p>.menubar li a{
background-color:#ffffff;
color:#000000;
display:block;
line-height:40px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}</p>
<p>.menubar li ul li{
color:#ffffff;
}</p>
<p>.menubar ul:hover a{
background-color:#ffffff;
text-decoration:none;
}
.menubar li:hover a{
background-color:#ffffff;
color:#187878;;
text-decoration:none;
}</p>
<p>
.menubar li ul{
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150px;
z-index:200;
/*top:1em;
/*left:0;*/
}</p>
<p>.menubar li:hover ul{
display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
}</p>
<p>.menubar li li {
background-color:#187878;
color:#ffffff;
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}</p>
<p>.menubar li:hover li a{
background:none;
}</p>
<p>.menubar li ul a{
display:block;
height:40px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}</p>
<p>.menubar li ul a:hover,.menubar li ul li:hover a {
background-color:#187878;
border:0px;
color:#ffffff;
text-decoration:none;
}</p>
<p>.menubar p{
clear:left;
}</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
길가던분
7년 전
감사합니다. 좋은하루되세요 아예 컬러 준부분 다 지우고 하나하나 다시하니 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인