css 잘하시는분좀봐주세요 ㅠㅠ 채택완료
https://sir.kr/data/editor/1608/9fc0b7c04c00cb06304915290a3408a4_1472533641_3541.PNG" title="9fc0b7c04c00cb06304915290a3408a4_1472533641_3541.PNG" alt="9fc0b7c04c00cb06304915290a3408a4_1472533" style="margin: 0px; padding: 0px; border: 0px; vertical-align: middle; max-width: 100%; color: rgb(72, 72, 72); font-family: 돋움, Dotum, sans-serif; font-size: 14.004px; line-height: 25.2072px; text-align: center;">
사이드 카테고리입니다 BMW PART 가 상품분류 면 마우스를 갖다댈시,밑으로펼쳐지면서
하위분류를 나타네게 할건데,네이버에 CSS드롭다운쳐보니 ㅠㅠ HTML CSS 구조를잘모르겠어서
수정을몬하고있네요 어떤식으로 해야할까요 ㅠㅠ
답변 2개
<style>
ul.menu ol{ display:none}
ul.menu:hover ol{ display:block }
</style>
<ul class="menu">
<li><a href="#none">BMW PART</a>
<ol>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
<li><a href="#none">audi part</a></li>
</ol>
</li>
</ul>
나머지 스타일은 알아서 하세요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
</p><p><style></p><p>.subnav {background:#f4f4f4;border:1px solid #dedede;}</p><p>.subnav * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}</p><p>.subnav ul {list-style:none;margin:0;padding:0;}</p><p>.subnav li {position:relative;border-bottom:1px solid #dedede;}</p><p>.subnav li:last-child {border:0;}</p><p>.subnav li:hover {background:#dedede;}</p><p>.subnav li.sub1 {padding:7px 20px;}</p><p>.subnav li.sub1:before {position:absolute;top:15px;left:10px;content:" ";width:4px;height:4px;background:#888;}</p><p>.subnav li a {color:#000016;text-decoration:none;}</p><p>.subnav li:hover a {color:#fff;text-decoration:none;}</p><p>.subnav li.sub1:hover:before {background:#fff;}</p><p>.subnav li .sub2 {display:none}</p><p>.subnav li:hover .sub2 {display:block}</p><p></style></p><p><div class="subnav"></p><p> <ul></p><p> <li class="sub1"></p><p> <a href="#">1차 메뉴 1</a></p><p> <ul class="sub2"></p><p> <li><a href="#">2차 메뉴 1-1</a><li></p><p> <li><a href="#">2차 메뉴 1-2</a><li></p><p> </ul></p><p> </li></p><p> <li class="sub1"></p><p> <a href="#">1차 메뉴 2</a></p><p> <ul class="sub2"></p><p> <li><a href="#">2차 메뉴 2-1</a><li></p><p> <li><a href="#">2차 메뉴 2-2</a><li></p><p> </ul></p><p> </li></p><p> </ul></p><p></div></p><p>
실제로 테스트한 페이지 링크 : http://dodu.kr/subnav.html">http://dodu.kr/subnav.html
css / html 제작 및 작성자 : 익명닉네임
답변에 대한 댓글 6개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인