그누보드 QA - 드롭다운 2차메뉴 색 변경하는법

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

길가던분 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.01.28 22:40:25 조회 4487 (122.♡.♡.199)

본문

홈페이지나 아래 소스를 보시면 아시겠지만 청소기 광택기 세척기는 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;
}