메뉴 css 좀 봐 주세요
본문
위에 이미지에서 220. 놀이공원.... 주메뉴를 클릭하면 서브 메뉴가 보이는데 이때 주메뉴 배경을 녹색으로 넣고 싶은데 css를 어떻게 수정해야 할까요?
갑자기 여기서 막히네요
왼쪽 메뉴를 다음과 같이 작업했습니다.
<li class=" has-sub" ><a href="product0201.php">22. LED환타커버 </a>
<ul class="has-sub">
<li class="" ><a href="product0201.php" >201. LED환타커버-대-벨트용 </a></li>
<li class=" has-sub mt-20" ><a href="product0220-1.php" >220. 놀이공원 놀이기구용 LED환타커버 </a>
<ul class="has-sub">
<li class="" ><a href="product0220-1.php" >220-1. 한국민속촌 (용인)</a></li>
<li class="" ><a href="product0220-2.php" >220-2. 에버랜드 (용인)</a></li>
<li class="" ><a href="product0220-3.php" >220-3. 롯데월드 (잠실)</a></li>
<li class="" ><a href="product0220-4.php" >220-4. 이월드 (대구)</a></li>
<li class="" ><a href="product0220-5.php" >220-5. 미래개발 (이동식바이킹)</a></li>
</ul>
</li>
</ul>
</li>
css가
/*aside_menu*/
#asidemenu, #asidemenu ul, #asidemenu ul li, #asidemenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; display: block; position: relative; }
#asidemenu { width: 100%; font-family: Raleway, sans-serif; color: #ffffff; }
#asidemenu ul ul { display: none; }
#asidemenu > ul > li.active > ul { display: block; }
.align-right { float: right; }
#asidemenu > ul > li { margin-top:-1px; font-weight:600;}
#asidemenu > ul > li > a { padding: 10px 10px; cursor: pointer; z-index: 2; font-size:15px; text-decoration: none; color: #444444; border:#e3e3e3 solid 1px; background: #fff; }
#asidemenu > ul > li > a:hover { color: #009a44;background-image:url('bg1.png');}
#asidemenu ul li.active > a{color: #ffffff; background:#009a44; background-image:url('bg1.png');}/*추가*/
#asidemenu ul > li.has-sub > a:after { position: absolute; right: 20px; top:50%; content:"\f107"; font-size: 16px; font-family: "FONTAWESOME"; color:inherit; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }*/
#asidemenu ul > li.has-sub > a:before { position: absolute; right: 15px; top:20px; content:"\f105"; font-size: 16px; font-family: "FONTAWESOME"; color:inherit; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
#asidemenu ul > li.has-sub.open > a:after{ display:none; }
#asidemenu ul > li.has-sub.open > a:before { display:block;position: absolute; right: 15px; top:20px; content:"\f107"; font-size: 16px; font-family: "FONTAWESOME"; color:inherit; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
#asidemenu ul ul li a { padding: 10px 10px; cursor: pointer; z-index: 2; font-size:14px; text-decoration: none; color: #333; background: #f8f8f8; background-image:url('bg1.png'); border-bottom: 1px solid #e3e3e3;}/*마우스 오버 색상*/
#asidemenu ul ul li.active > a{background:#009a44; color: #fff; background-image:url('bg1.png');}
#asidemenu ul ul li a:hover { background:#009a44; background-image:url('bg1.png');}
#asidemenu ul ul ul li.active > a{ background:#444 url() 23px 20px no-repeat }
#asidemenu ul ul ul ul li.active > a{ padding-left:40px; background:#333 url() 33px 20px no-repeat }
#asidemenu ul ul ul li a { padding-left: 10px; background:#c0bcbc; color: #333;line-height:140%; background-image:url('bg1.png'); }
#asidemenu ul ul ul ul li a { background:#009a44; color: #fff;background-image:url('bg1.png'); }
#asidemenu ul ul li a:hover { color: #ffffff; }
#asidemenu ul ul > li.has-sub > a:after { top: 16px; right: 26px; background: #; }
#asidemenu ul ul > li.has-sub > a:before { top: 20px; background: #; }
답변 3
사이트 주소를 주시면 좀더 빨리 해결이 가능할거 같아요
쪽지로 보내 보내드렸습니다.
감사합니다.
우선 class명이 동일한것이 보이네요. 우선 각자 해당 class명을 부여해주시고
클릭후에 add class를 하고 다른 것을 클릭하면 remove class를 하는 방식의 jQuery를 사용하면 될듯합니다. 위분 말씀처럼 사이트주소가 필요할듯 보입니다.
F12번 요소보기를 하셔서 저부분을 클릭하시면 어느부분인지 경로가 나옵니다.
그 경로대로 수정해보심이^^
답변을 작성하시기 전에 로그인 해주세요.
