드롭다운 2차메뉴 색 변경하는법

드롭다운 2차메뉴 색 변경하는법

QA

드롭다운 2차메뉴 색 변경하는법

본문

홈페이지 주소 : http://cleanermart.kr/shop/

홈페이지나 아래 소스를 보시면 아시겠지만 청소기 광택기 세척기는 1차메뉴가 있고 하위메뉴가 있습니다. 그 하위메뉴에 있는(예를들어 진공청소기, 스팀청소기 같은것들) 텍스트만 항상 하얀색이도록 변경하고 싶은대  하위메뉴에 마우스를 올려놓으면 하얀색으로 나오는대 올려놓지 않은 상태에서는 배경색 그대로 나와서 어떻게 하면될까요? 

 

 

shop.head.php


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

 

default_shop.css


.menubar{
border:none;
border:0px;
margin:0 auto;
padding:30px 0 0 0;
font-size:12px;
font-weight:bold;
width :1000px;
}
.menubar ul{
background-color:#ffffff;
height:40px;
list-style:none;
padding:0;
text-align:center;
}
.menubar li{
padding:0;
width:100px;
display:inline-block;
text-align:center;
color:ffffff;
}
.menubar li a{
background-color:#ffffff;
color:#000000;
display:block;
line-height:40px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menubar li ul li{
    color:#ffffff;
}
.menubar ul:hover a{
background-color:#ffffff;
text-decoration:none;
}
.menubar li:hover a{
background-color:#ffffff;
color:#187878;;
text-decoration:none;
}

.menubar li ul{
display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menubar li:hover ul{
display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
}
.menubar li li {
background-color:#187878;
color:#ffffff;
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}
.menubar li:hover li a{
background:none;
}
.menubar li ul a{
display:block;
height:40px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menubar li ul a:hover,.menubar li ul li:hover a {
background-color:#187878;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menubar p{
clear:left;
}

이 질문에 댓글 쓰기 :

답변 2

li.long a {

   color : #fff !important;

}

css에 추가하시면 될 것 같습니다.

2차메뉴 ul에 클래스를 주시고

.클래스명 li {background:#hexacode} 넣어주시면 될듯

답변을 작성하시기 전에 로그인 해주세요.
전체 1,498
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT