http://sitemake.kr/2.php 의 메뉴를 http://sitemake.kr/ 에 적용하고자 합니다.
그대로 잡아넣으면 스타일적용 안되는 이유는 li함수가 겹치는 이유때문일까요?
고수님들 해결방법좀 부탁드립니다.
Copy
<!doctype html><html lang="ko"><head><!-- sitemake.kr 메뉴 --> <style class="cp-pen-styles"> .wrapper { margin: 0px 30px;} .box { background: white; min-height: 100px; max-width: 500px; margin: 30px auto; display: flex; flex: column nowrap; align-content: flex-start; justify-content: center; align-items: center;} a { color: white; font-family: sans-serif; text-transform: uppercase; font-size: .7rem; font-weight: bold; letter-spacing: .1rem; text-decoration: none; padding: 10px;} /* 'hello my name is' tag */.btn.four { transition: all 1s ease-in-out;}.btn.four a { background: #eee; color: #aaa; font-size: .72rem; letter-spacing: .05rem; transition: all 400ms ease 0.1s;}.btn.four a:hover { transition: all 600ms ease 0.1s; background: white; color: #A44A3F;}.btn.four ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; padding: 20px 10px;}.btn.four li { float: left; z-index: 2;}.btn.four li a { display: inline; z-index: 2;}.btn.four ul li { /*&:first-child a:hover:before { top: -10px; left: -5px; background: #3F7CAC; height: 100%; transition: all 300ms; visibility: visible; } &:last-child a:hover:before { top: 10px; right: -5px; background: #3F7CAC; height: 100%; transition: all 300ms; visibility: visible; }*/}.btn.four ul li a { position: relative;}.btn.four ul li a:before { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 0px; z-index: -1; content: ""; visibility: hidden; border-radius: 3px; transition: all 400ms ease 0.1s;}.btn.four ul li a:hover:before { height: 47px; background: #3F7CAC; position: absolute; display: block; margin: auto; content: ""; transition: all 600ms ease 0.1s; visibility: visible;}</style></head><body><div class="wrapper"> <div class = "box"> <nav class="btn four"> <ul> <li><a href="http://sitemake.kr/bbs/content.php?co_id=company">회사소개</a></li> <li><a href="http://sitemake.kr/bbs/content.php?co_id=sitemake">사이트제작</a></li> <li><a href="http://sitemake.kr/bbs/write.php?bo_table=siteorder">제작의뢰</a></li> <li><a href="http://sitemake.kr/bbs/board.php?bo_table=gallery">포트폴리오</a></li> <li><a href="http://sitemake.kr/bbs/qalist.php">1:1 문의</a></li> </ul> </nav> </div></div><!-- /.wrapper --> </body></html>답변 2개 / 댓글 2개
채택된 답변
+20 포인트
WebMONSTER
2017-04-06 (목) 23:02:59
.css > ul 형식으로 진행해보시고 그래도 안되면
옵션뒤에 important를 넣어보세요
board:1px solid #000!important;
이런식으로요
답변에 대한 댓글 1개
사이트메이크
2017-04-06 (목) 23:11:06
gbeye
2017-04-06 (목) 23:51:32
GKTEAM 님의 말씀대로 하면 될거같아요
.btn ul
이렇게 css에 적용하면 클래스가 btn에 안에 ul 은 스타일이다 먹어라 라는 의미인데요
.btn > ul
이거는 클래스가 btn 다음에 오는 ul 만 스타일이 적용됩니다.
의미는 이런데 다르게 적용시키시려면 이렇게 해도 무방할듯해요.
답변에 대한 댓글 1개
사이트메이크
2017-04-06 (목) 23:58:22
.btn.four ul li a:before { 의 경우
.btn.four > ul > li > a:before { 맞나요?
지비아이님 죄송합니다. 맨 처음 답변자님 채택좀 하겠습니다^^;
.btn.four > ul > li > a:before { 맞나요?
지비아이님 죄송합니다. 맨 처음 답변자님 채택좀 하겠습니다^^;
답변을 작성하려면 로그인이 필요합니다.
아 어렵네요,
혹시 그누에 삽입해도 그누스타일함수랑 겹치지 않도록 수정좀 가능하실까요?
비교를 해봐가면서 공부하고싶습니다.
그리고 .css-ul은 대충알겠는데 .css>ul 해석좀 가능할까요.