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

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

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

드롭다운 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} 넣어주시면 될듯

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 73,390 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT