css 링크속성 질문드립니다...
본문
메뉴 수정을 하고 싶은데 제가 코딩에는 취약해서 질문드립니다.
메인메뉴 텍스트색이 기본 검정색에서 마우스 오버시 머스타드로 변하게
하고 싶은데, 아무리 수정하고 고쳐봐도 원하는대로 안됩니다...
기본 머스타드색, 오버시 머스타드색에서 변화가 없어요.
부탁드립니다.
index.html 의 메뉴소스
<li class="menu-item-simple-parent menu-item-depth-0 mustard" style="letter-spacing:1.5px"><a href="#"> <strong>학원소개</strong> </a>
<ul class="sub-menu">
<li><a href="<?php echo G5_URL; ?>/sindex1_1.html" target="_self">인사말</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_2.html" target="_self">동기부여
</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_3.html" target="_self">목표</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_4.html" target="_self">공간안내</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_5.html" target="_self">오시는길</a></li>
<li><a href="<?php echo G5_URL; ?>/sindex1_6.html" target="_self">자료방</a></li>
</ul>
<a class="dt-menu-expand"><strong>+</strong></a>
</li>
css 관련소스
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;}
#main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}
==========================================================
대충 이렇습니다.
위 css를 제가 아는대로 아무리 수정해봐도 적용이 안됩니다.
도움 부탁드립니다ㅠㅠ
답변 4
css를 변경하시려면
위에 존재하는 태그, id, class 명으로 접근해야 합니다
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;} #main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}
이 코드로는 매칭되는게 없다고 말씀드리고
알려드리려고 설명한거구요
<div class="dt-menu-toggle" id="dt-menu-toggle">카테고리<span class="dt-menu-toggle-icon"></span></div>
<ul id="menu-main-menu" class="menu">
<li class="menu-item-simple-parent menu-item-depth-0 mustard" style="letter-spacing:1.5px"><a href="#"> <strong>학원소개</strong> </a> <ul class="sub-menu"> <li><a href="<?php echo G5_URL; ?>/sindex1_1.html" target="_self">인사말</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_2.html" target="_self">동기부여 </a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_3.html" target="_self">목표</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_4.html" target="_self">공간안내</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_5.html" target="_self">오시는길</a></li> <li><a href="<?php echo G5_URL; ?>/sindex1_6.html" target="_self">자료방</a></li> </ul> <a class="dt-menu-expand"><strong>+</strong></a> </li>
와 같이 존재하는 상황에서는
css를
#main-menu > ul.menu > li.mustard> a{border-color:#f7921d;}
이거를 한개만 변경해보면
ul.menu li.mustard a{border-color:#f7921d; border:1px solid #f7921d;}
ul.menu > li.current_page_item.mustard > a,
ul.menu > li.mustard > a:hover {color:#f7921d;}
로 한번 변경해보시면
테두리 컬러와 마우스오버가 변경될겁니다.
current_page_item 속성은 PHP에서 부여하시는거 같은데 그건 알아서 정리하세요
제가 설명능력이 부족해서 잘못 이해하신듯 합니다ㅠㅠ
해결은 안됐지만 친절하신 설명 정말 감사드립니다.
좋은하루 되시고 감기조심 하세요!
위의 코드만으로는 매칭되는게 없다고 봐야할것 같네요
css 의
#main-menu
는
태그에서 id="main_menu" 로 존재해야 하는데 안보이구요
#main-menu > ul.menu > li.mustard> a
는
< ... id="main-menu" >
<ul class="menu">
<li class="mustard">
<a href="...">
를 접근할때 사용하는 css 이구요
또
#main-menu > ul.menu > li.current_page_item.mustard> a, #main-menu > ul.menu > li.mustard > a:hover{color:#f7921d;}
에서도 마찬가지로
< ... id="main-menu">
<ul class="menu">
<li class="current_page_item mustard">
<a href=".....".>
와
< ... id="main-menu" >
<ul class="menu">
<li class="mustard">
<a href="...">
를 접근해야하는데
위에서는 찾아볼수가 없네요
서로 맞게 맞추시던지
css를 맞게 변경하시던지 해야 합니다.
플래토님 댓글 감사합니다!
소스 위에
<div class="dt-menu-toggle" id="dt-menu-toggle">카테고리<span class="dt-menu-toggle-icon"></span></div>
<ul id="menu-main-menu" class="menu">
전체 감싸는 코드가 있습니다만 붙여넣기 할때 생략했네요.
죄송합니다...
이정도 코드로 알 수 있을까요?
참고로 작업 다하시고 적용이 안되면 /extend/version.extend.php 에서G5_CSS_VER 의 버젼 정보를 올려야 반영됩니다.
캐시로 적용이 안될수도 있습니다.
소스를 정확히 봐야겠지만 .mustard는 작성자님이 임의로 부여한것 같은데 굳이 넣지마시고, li.current_page_item a가 페이지 위치를 나타내는 클래스명 같으니 활성화를 위한 색상코드에 color:mustard를 넣어 주시면 될것 같습니다.
#main-menu > ul.menu > li> a{color:black;border-color:#f7921d;}
#main-menu > ul.menu > li> a:hover{color:mustard}
#main-menu > ul.menu > li.current_page_item a{color:mustard}로 해보세요
근데 #main-menu로 시작하는 id명이 존재하나요?
소스에선 확인이 안되니 정확한 id명을 넣었는지도 확인을 해보세요.
